Viewpager+Fragment实现项目主布局

来源：互联网发布：游戏开发编程语言编辑：程序博客网时间：2024/06/06 02:25

效果预览图：可点击菜单进行切换，也可以左右滑动进行切换。

不知道为什么我的 .gif 为毛不显示.....

好了，首先在AS中完善 layout文件的布局

其实也就是一个top，一个buttom，和中间的一个ViewPager即可实现（代码我就直接贴出来了,这个也没有什么好说的）

buttom_layout.xml文件

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="50dip">        <LinearLayout          android:layout_width="match_parent"          android:layout_height="50dip"          android:background="#00000000">            <LinearLayout              android:id="@+id/home_layout_view"              android:layout_width="wrap_content"              android:layout_height="50dip"              android:orientation="vertical"              android:gravity="center"              android:layout_weight="1">                    <ImageView                      android:id="@+id/home_image_view"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center"                      android:src="@drawable/comui_tab_home_selected" />                  <TextView                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:text="首页"                      android:layout_marginTop="5dip"/>          </LinearLayout>            <LinearLayout              android:id="@+id/message_layout_view"              android:layout_width="wrap_content"              android:layout_height="50dip"              android:orientation="vertical"              android:gravity="center"              android:layout_weight="1">                <ImageView                  android:id="@+id/message_image_view"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_gravity="center"                  android:src="@drawable/comui_tab_message" />              <TextView                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="消息"                  android:layout_marginTop="5dip"/>          </LinearLayout>            <LinearLayout              android:id="@+id/pond_layout_view"              android:layout_width="wrap_content"              android:layout_height="50dip"              android:orientation="vertical"              android:gravity="center"              android:layout_weight="1">                <ImageView                  android:id="@+id/pond_image_view"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_gravity="center"                  android:src="@drawable/comui_tab_pond" />              <TextView                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="博客"                  android:layout_marginTop="5dip"/>          </LinearLayout>            <LinearLayout              android:id="@+id/person_layout_view"              android:layout_width="wrap_content"              android:layout_height="50dip"              android:orientation="vertical"              android:gravity="center"              android:layout_weight="1">                <ImageView                  android:id="@+id/person_image_view"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_gravity="center"                  android:src="@drawable/comui_tab_person" />              <TextView                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="我的"                  android:layout_marginTop="5dip"/>          </LinearLayout>        </LinearLayout>  </LinearLayout>

activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context="com.yongning.hello.MainActivity"      android:orientation="vertical">  引入头     <include layout="@layout/top_layout" />        <android.support.v4.view.ViewPager          android:id="@+id/View_Pager"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:layout_weight="1"/>  引入底部菜单      <include layout="@layout/buttom_layout" />    </LinearLayout>

OK，到目前为止，前端的UI应该就显示出来了。接下来需要在activity中实现界面的点击以及滑动切换的效果。

中间是一个viewpager，点击切换界面的效果是将viewpager和底部菜单进行联动效果就可以实现的。（代码中有相关的注解）

MainActivity 配置文件

package com.yongning.hello;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.yongning.hello.fragment.home_fragment;
import com.yongning.hello.fragment.message_fragment;
import com.yongning.hello.fragment.person_fragment;
import com.yongning.hello.fragment.pond_fragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ViewPager View_Pager;
private LinearLayout home_layout_view;
private LinearLayout message_layout_view;
private LinearLayout pond_layout_view;
private LinearLayout person_layout_view;
private ImageView home_image_view;
private ImageView message_image_view;
private ImageView pond_image_view;
private ImageView person_image_view;
private FragmentPagerAdapter fragmentPagerAdapter;
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initEvent();
SetSelect(0); //首启动打开的界面为home_layout_view
}
private void initView() {
View_Pager = (ViewPager) findViewById(R.id.View_Pager);
home_layout_view = (LinearLayout) findViewById(R.id.home_layout_view);
message_layout_view = (LinearLayout) findViewById(R.id.message_layout_view);
pond_layout_view = (LinearLayout) findViewById(R.id.pond_layout_view);
person_layout_view = (LinearLayout) findViewById(R.id.person_layout_view);
home_image_view = (ImageView) findViewById(R.id.home_image_view);
message_image_view = (ImageView) findViewById(R.id.message_image_view);
pond_image_view = (ImageView) findViewById(R.id.pond_image_view);
person_image_view = (ImageView) findViewById(R.id.person_image_view);
//新建滑动的4个数据源 fragments数据集中
fragments = new ArrayList<>();
Fragment home = new home_fragment();
Fragment message = new message_fragment();
Fragment pond = new pond_fragment();
Fragment person = new person_fragment();
fragments.add(home);
fragments.add(message);
fragments.add(pond);
fragments.add(person);
//新建一个适配器
fragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
};
//Viewpager传值
View_Pager.setAdapter(fragmentPagerAdapter);
//View_Pager和itemMenu进行联动效果
View_Pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
ReSetimg();
int Currentitem = View_Pager.getCurrentItem();
/**
* 文件进行索引调用 (Alt+Shift+m)
*/
Switch_Tab(Currentitem);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//添加菜单点击事件
private void initEvent() {
home_layout_view.setOnClickListener(this);
message_layout_view.setOnClickListener(this);
pond_layout_view.setOnClickListener(this);
person_layout_view.setOnClickListener(this);
}
//点击后的相关操作
@Override
public void onClick(View v) {
ReSetimg();
switch (v.getId()) {
case R.id.home_layout_view :
SetSelect(0);
break;
case R.id.message_layout_view :
SetSelect(1);
break;
case R.id.pond_layout_view :
SetSelect(2);
break;
case R.id.person_layout_view :
SetSelect(3);
break;
default:
break;
}
}
private void SetSelect(int a) {
ReSetimg();
Switch_Tab(a);
}
//设置点击菜单后当前图片变亮,同时View_Pager滑动到指定的界面
private void Switch_Tab(int a) {
switch (a) {
case 0 :
View_Pager.setCurrentItem(0);
home_image_view.setImageResource(R.drawable.comui_tab_home_selected);
break;
case 1 :
View_Pager.setCurrentItem(1);
message_image_view.setImageResource(R.drawable.comui_tab_message_selected);
break;
case 2 :
View_Pager.setCurrentItem(2);
pond_image_view.setImageResource(R.drawable.comui_tab_pond_selected);
break;
case 3 :
View_Pager.setCurrentItem(3);
person_image_view.setImageResource(R.drawable.comui_tab_person_selected);
break;
default:
break;
}
}
//设置所有图片的颜色为暗色
private void ReSetimg() {
home_image_view.setImageResource(R.drawable.comui_tab_home);
message_image_view.setImageResource(R.drawable.comui_tab_message);
pond_image_view.setImageResource(R.drawable.comui_tab_pond);
person_image_view.setImageResource(R.drawable.comui_tab_person);
}
}

其中4个fragment继承fragment，用onCreateView指向4个不同的界面显示在Viewpager上。

基本就这样了，不知道我有没有表达清楚,欢迎指正，源码下载地址：附上。

-----update-----

fragment的应用场景分为 ①：在同一个activity中可以定义多个fragment； ②：在多个activity中调用同一个fragment；

使用方法分为静态和动态2种；此demo使用的动态的fragment完成的，当点击菜单item的时候，内容区域的viewpager跳转到对应的界面。

我简单阐述下实现的思路：

首先实现UI的显示，中间的内容区域使用ViewPager完成；显示成功后设置

①：点击菜单键切换图片的颜色；

②：新建4个菜单对应的fragment封装进ViewPager中并显示出来；

③：给ViewPager和item一个联动效果，使得切换fragment时两者相互对应；

PS：fragment的使用方法：

创建fragment子类继承fragment类；用onCeateView重写fragment的布局；将fragment引入到activity中；

（据说使用v4包下的fragment可以解决各类设备的适配问题哦~）

阅读全文

0 0