ViewPager+Fregment布局滑动

ViewPager+Fragment对我一个android新手来说完全不知道是什么，ViewPager是什么，fragment是什么，根据自己查寻资料了解。ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左右滑动，从而切换不同的View，Fragment是Android3.0后引入的一个新的API，他出现的初衷是为了适应大屏幕的平板电脑，当然现在他仍然是平板APP UI设计的宠儿，而且我们普通手机开发也会加入这个Fragment，我们可以把他看成一个小型的Activity，又称Activity片段。这两个解释是在菜鸟教程找中找到的，viewpager：https://www.runoob.com/w3cnote/android-tutorial-viewpager.html Fragment:https://www.runoob.com/w3cnote/android-tutorial-fragment-base.html

现在开始上代码逻辑

分四步骤来实现
（1）准备Freagment类
（2）准备Fragment的xml布局视图
（3）准备适配器（FragmentPagerAdapter）
（4）准备主界面xml布局和HomepagerActivity类
代码
创建Fragment类 HomePagerFragment.java

public class HomePagerFragment extends Fragment implements View.OnClickListener {    //用户修改按钮    private Button home_btn;    /**     * 创建视图     * @param inflater     * @param container     * @param savedInstanceState     * @return     */    @Nullable    @Override    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view;        //获取xml布局        view = inflater.inflate(R.layout.users_page_01,null);        initview(view);        return view;    }    /**     * 布局初始化     * @param view     */    private void initview(View view) {        home_btn = view.findViewById(R.id.home_btn);        home_btn.setOnClickListener(this);    }    /**     * 点击事件设置     * @param v v.getid();获取view视图的id     */    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.home_btn:                Intent intent = new Intent(getActivity(),CarertActivity.class);                startActivity(intent);                break;            default:                break;        }    }

Fragment的xml布局视图 users_page_01.xml

<?xml version="1.0" encoding="utf-8"?>:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:tools="http://schemas.android.com/tools"    android:gravity="center"    >    :layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal">    :layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/home"        android:textSize="50dp"        android:textStyle="bold"        android:layout_weight="1"/>

适配器（FragmentPagerAdapter） ContentAdapter.java

public class ContentAdapter extends FragmentPagerAdapter {    //存放Fragment碎片集合（list）    private List<Fragment> list;    //fragmentManager，Fragment管理    FragmentManager fragmentManager ;        public ContentAdapter(FragmentManager fm,List<Fragment> views) {        super(fm);        this.list = views;        this.fragmentManager = fm;    }    /**     * //返回页面数量     * @return     */    @Override    public int getCount() {        return this.list.size();    }    /**     * 实例化一个页面     * @param position     * @return     */    @NonNull    @Override    public Fragment getItem(int position) {        return list.get(position);    }}

主界面xml布局 users_pager_main.xml

<?xml version="1.0" encoding="utf-8"?>:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="vertical"    tools:context=".users.view.HomePagerActivity">    >    :id="@+id/av_center"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:background="#ffffff"        android:orientation="vertical" >    >    >>

主界面HomepagerActivity类 HomePagerActivity.java

public class HomePagerActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {    //底部菜单的4个LinerLayout    private LinearLayout ll_home;    private LinearLayout ll_dynamic;    private LinearLayout ll_coach;    private LinearLayout ll_userhome;    //底部菜单的4个图片imaget    private ImageView iv_home;    private ImageView iv_dynamic;    private ImageView iv_coach;    private ImageView iv_userhome;    //底部菜单的4个文本text    private TextView tv_home;    private TextView tv_dynamic;    private TextView tv_coach;    private TextView tv_userhome;    //中间内容区域组件    private ViewPager av_center;    //ViewPager的适配器ContentAdapter    private ContentAdapter adapter;    //中间内容视图集合    private List<Fragment> viewList;    //Fragment布局    private PagerFragmentUitl transaction;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.users_pager_main);        //初始化视图        initView();        //初始化底部按钮        initEvent();        this.av_center.setCurrentItem(0);    }    /**     * //初始化视图     */    private void initView() {        //获取底部4个菜单组件        this.ll_home = findViewById(R.id.ll_home);        this.ll_dynamic = findViewById(R.id.ll_dynamic);        this.ll_coach = findViewById(R.id.ll_coach);        this.ll_userhome = findViewById(R.id.ll_userHome);        //底部菜单的4个图片image        this.iv_home = findViewById(R.id.iv_home);        this.iv_dynamic = findViewById(R.id.iv_dynamic);        this.iv_coach = findViewById(R.id.iv_coach);        this.iv_userhome = findViewById(R.id.iv_userHome);        //获取底部菜单4个文本text        this.tv_home = findViewById(R.id.tv_home);        this.tv_dynamic = findViewById(R.id.tv_dynamic);        this.tv_coach = findViewById(R.id.tv_coach);        this.tv_userhome = findViewById(R.id.tv_userHome);        //获取主页中间内容组件        this.av_center = findViewById(R.id.av_center);        //适配器        viewList = new ArrayList<Fragment>();        viewList.add(new HomePagerFragment());        viewList.add(new DynamicPagerFragment());        viewList.add(new CoachPagerFragment());        viewList.add(new UsersPagerFragment());        this.adapter = new ContentAdapter(getSupportFragmentManager(),viewList);        //将适配器放进中间内容区        this.av_center.setAdapter(adapter);    }    /**     * 给组件设置按键监听     */    private void initEvent() {        //底部菜单linearLyaout        this.ll_home.setOnClickListener(this);        this.ll_dynamic.setOnClickListener(this);        this.ll_coach.setOnClickListener(this);        this.ll_userhome.setOnClickListener(this);        //设置ViewPager滑动监听        this.av_center.setOnClickListener(this);    }    /**     * 单击事件触发处理     * @param v     */    @Override    public void onClick(View v) {        //每次单击底部背景和textView都变为原来的颜色        restartBotton();        //当底部菜单被选中改变背景颜色和textView，显示viewpager视图        switch (v.getId()) {            case R.id.ll_home:                this.tv_home.setTextColor(Color.RED);                this.iv_home.setImageResource(R.drawable.train_pressed);                this.av_center.setCurrentItem(0);                break;            case R.id.ll_dynamic:                this.tv_dynamic.setTextColor(Color.RED);                this.iv_dynamic.setImageResource(R.drawable.found_pressed);                this.av_center.setCurrentItem(1);                break;            case R.id.ll_coach:                this.tv_coach.setTextColor(Color.RED);                this.iv_coach.setImageResource(R.drawable.coach_pressed);                this.av_center.setCurrentItem(2);                break;            case R.id.ll_userHome:                this.tv_userhome.setTextColor(Color.RED);                this.iv_userhome.setImageResource(R.drawable.me_pressed);                this.av_center.setCurrentItem(3);                break;            default:                break;        }    }    public void restartBotton() {        //设置文本为黑色        this.tv_home.setTextColor(Color.BLACK);        this.tv_dynamic.setTextColor(Color.BLACK);        this.tv_coach.setTextColor(Color.BLACK);        this.tv_userhome.setTextColor(Color.BLACK);        this.iv_home.setImageResource(R.drawable.train_unpressed);        this.iv_dynamic.setImageResource(R.drawable.found_unpressed);        this.iv_coach.setImageResource(R.drawable.coach_unpressed);        this.iv_userhome.setImageResource(R.drawable.me_unpressed);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {        //每次单击底部背景和textView都变为原来的颜色        restartBotton();        //当前view被选择的时候,改变底部菜单背景，文字颜色        switch (position) {            case 0:                this.tv_home.setTextColor(Color.BLACK);                this.iv_home.setImageResource(R.drawable.train_pressed);                break;            case 1:                this.tv_dynamic.setTextColor(Color.BLACK);                this.iv_dynamic.setImageResource(R.drawable.found_pressed);                break;            case 2:                this.tv_coach.setTextColor(Color.BLACK);                this.iv_coach.setImageResource(R.drawable.coach_pressed);                break;            case 3:                this.tv_userhome.setTextColor(Color.BLACK);                this.iv_userhome.setImageResource(R.drawable.me_pressed);                break;            default:                break;        }    }    @Override    public void onPageScrollStateChanged(int state) {    }}

3.最后加个底部标签和顶部
顶部 users_pager_top_title.xml

<?xml version="1.0" encoding="utf-8"?>:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    :layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="vertical"        android:id="@+id/ll_top"        android:background="@color/pink"        >        :layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/home"            android:textStyle="bold"            android:textSize="30dp"            android:textColor="@color/colorPrimary"            />    >>

底部 users_pager_bottom_title.xml

<?xml version="1.0" encoding="utf-8"?>:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="#EDE8E8"    android:padding="5dp">    <!--android:orientation="vertical"线性布局需要配置-->            :layout_width="30dp"            android:layout_height="30dp"            android:src="@drawable/train_pressed"            android:id="@+id/iv_home"            android:layout_marginRight="3dp"            android:padding="6dp"            />        :layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/home"            android:id="@+id/tv_home"            android:textSize="15dp"            android:textColor="@color/red"            android:paddingRight="10dp"            />    >    :layout_width="0dp"        android:layout_height="wrap_content"        android:id="@+id/ll_dynamic"        android:orientation="vertical"        android:gravity="center"        android:layout_weight="1">        :layout_width="30dp"            android:layout_height="30dp"            android:src="@drawable/found_unpressed"            android:id="@+id/iv_dynamic"            android:layout_marginRight="3dp"            android:padding="6dp"/>        :layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/dynamic"            android:id="@+id/tv_dynamic"            android:textSize="15dp"            android:textColor="@color/black"            android:paddingRight="5dp"/>    >    :layout_width="0dp"        android:layout_height="wrap_content"        android:id="@+id/ll_coach"        android:orientation="vertical"        android:gravity="center"        android:layout_weight="1">        :layout_width="30dp"            android:layout_height="30dp"            android:src="@drawable/coach_unpressed"            android:id="@+id/iv_coach"            android:padding="6dp"/>        :layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/coach"            android:id="@+id/tv_coach"            android:textSize="15dp"            android:textColor="@color/black"            android:paddingRight="5dp"/>    >    :layout_width="0dp"        android:layout_height="wrap_content"        android:id="@+id/ll_userHome"        android:orientation="vertical"        android:gravity="center"        android:layout_weight="1">        :layout_width="30dp"            android:layout_height="30dp"            android:src="@drawable/me_unpressed"            android:id="@+id/iv_userHome"            android:padding="6dp"/>        :layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/userHome"            android:id="@+id/tv_userHome"            android:textSize="15dp"            android:textColor="@color/black"/>    >>

更多相关文章

随机推荐