个人第二个项目总结：viewPager和fragment

其他 2018-07-07 10:08:31 阅读次数: 0

前面我们已经用listView和recyclerView实现了列表布局，可以做到列表纵向滑动显示屏幕外的数据。其中recyclerView还能实现横向的滑动。但是如果我们的需求是横向滑动切换不同的界面，那么以上的方法就不能满足我们的需求。所以,今天我们要用到的view Pager和fragment。

首先看一下要完成的效果图：

每次向左滑动界面，就会从首页跳到功能页，再跳到捐助我们，反之同理。如何实现呢？

首先，创建一个MainActivity,用来显示主页面，在MainActivity.xml中，在你需要滑动的地方添加ViewPager

 <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />

包名必须完整，不然无效。有了这个，才能实现滑动界面。

然后在你的主界面设置几个textView，和几个imageView。每个textView正上方分别对应一个ImageView,这需要在LinearLayout里嵌套两个LinearLayout,外置的LinearLayout为vertical，内置的为horizontal，然后将他们的平均排列，最后居中对齐即可。整个代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.wei.i_like_study.enter">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main"
            android:layout_weight="1" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/function"
            android:layout_weight="1"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/money"
            android:layout_weight="1"
            />

    </LinearLayout>

    <LinearLayout

        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="首页"
            android:textSize="16dp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="功能"
            android:textSize="16dp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="捐助我们"
            android:textSize="16dp" />
    </LinearLayout>
</LinearLayout>

有了布局，我们就需要分别为三个textView创建一个布局，这里我们用fragment来布局，所以创建三个fragment，然后分别进行布局。

这里我们创建oneFragment,twoFragment,threeFragment三个Fragment.

在创建fragment_one,fragment_two,fragment_three分别对应三个Fragment.

fragment中的核心内容很简单，就是一个加载布局

package com.example.wei.i_like_study;

import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by WEI 哥 on 2018/7/2.
 */

public class oneFragment extends android.support.v4.app.Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one, null);        //将布局加载到view中
        return view;
    }
}

关于它的xml文件，其实和activity的xml一样，这个就让读者自己根据自己的业务需求自行完善。因为三个fragment其实可以一样，所以这里就不再赘述。下面看看如何实现滑动切换界面的。

首先说一下大致思路，将Fragment存放到数组，监听屏幕滑动事件，将对应的fragment取出来并显示在界面。

然后说一说实现，和recyclerView一样，我们要用到自定义适配器，命名为FragmentAdapter

package com.example.wei.i_like_study;

/**
 * Created by WEI 哥 on 2018/7/2.
 */
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragmentAdapter extends FragmentPagerAdapter {
    private FragmentManager mfragmentManager;
    private List<Fragment> mlist;

    public FragmentAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.mlist = list;
    }

    @Override
    public Fragment getItem(int arg0) {
        return mlist.get(arg0);//显示第几个页面
    }

    @Override
    public int getCount() {
        return mlist.size();//有几个页面
    }
}

然后，将每个Fragment都放入list，监听TextView的点击和屏幕的滑动,屏幕的滑动viewPager内部已经帮我们实现，所以只需调用

setOnPageChangeListener这个函数即可

具体代码，如下：

package com.example.wei.i_like_study;


import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class enter extends AppCompatActivity implements OnClickListener{
    private TextView textView1,textView2,textView3;
    private ViewPager myViewPager;
    private List<Fragment> list;                                  //存放fragment数组
    private FragmentAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_enter);
        InitView();                                                //主界面
        textView1.setOnClickListener(this);
        textView2.setOnClickListener(this);
        textView3.setOnClickListener(this);
        myViewPager.setOnPageChangeListener(new MyPagerChangeListener());
        list = new ArrayList<>();
        list.add(new oneFragment());
        list.add(new twoFragment());
        list.add(new threeFragment());
        adapter = new FragmentAdapter(getSupportFragmentManager(), list);
        myViewPager.setAdapter(adapter);
        myViewPager.setCurrentItem(0);                           //初始化显示第一个页面
        textView1.setTextColor(Color.RED);                       //被选中就为红色
    }

    private void InitView() {
        textView1=(TextView)findViewById(R.id.textView1);
        textView2=(TextView)findViewById(R.id.textView2);
        textView3=(TextView)findViewById(R.id.textView3);
        myViewPager = (ViewPager) findViewById(R.id.viewPager);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.textView1:
                myViewPager.setCurrentItem(0);                      //将点击的textView所对应的页面显示出来
                textView1.setTextColor(Color.RED);textView1.setTextSize(20);
                textView2.setTextColor(Color.GRAY);textView2.setTextSize(16);
                textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
                break;
            case R.id.textView2:
                myViewPager.setCurrentItem(1);
                textView2.setTextColor(Color.RED);textView2.setTextSize(20);
                textView1.setTextColor(Color.GRAY);textView1.setTextSize(16);
                textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
                break;
            case R.id.textView3:
                myViewPager.setCurrentItem(2);
                textView3.setTextColor(Color.RED);textView3.setTextSize(20);
                textView2.setTextColor(Color.GRAY);textView1.setTextSize(16);
                textView1.setTextColor(Color.GRAY);textView2.setTextSize(16);
                break;
        }
    }
        public class MyPagerChangeListener implements OnPageChangeListener {              //监听屏幕的滑动
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {                        //当前选中的页面textView颜色改变
           switch(position){
               case 0:
                   textView1.setTextColor(Color.RED);textView1.setTextSize(20);
                   textView2.setTextColor(Color.GRAY);textView2.setTextSize(16);
                   textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
                    break;
               case 1:
                   textView2.setTextColor(Color.RED);textView2.setTextSize(20);
                   textView1.setTextColor(Color.GRAY);textView1.setTextSize(16);
                   textView3.setTextColor(Color.GRAY);textView3.setTextSize(16);
                    break;
               case 2:
                   textView3.setTextColor(Color.RED);textView3.setTextSize(20);
                   textView2.setTextColor(Color.GRAY);textView1.setTextSize(16);
                   textView1.setTextColor(Color.GRAY);textView2.setTextSize(16);
                   break;
           }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

当屏幕滑动，下面对应的textView颜色也会相应变化，这样用户才会知道到底处于哪一个界面。

当然，fragment里面的内容是要根据自己的业务逻辑改变的，值得注意的是，我们主页面已经有了横向滑动切换页面，那么它的几个fragment里面不能再有其他的横向滑动了，这样会造成冲突。

好了，关于横向滑动切换页面就讲到这里了，下期我们来聊聊关于三大键的屏蔽



猜你喜欢

转载自blog.csdn.net/qq_37820491/article/details/80928811
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022