02 Anykey左右滑动布局ViewPager

目录

1. 先看一下最终的效果图

如图所示，标题栏有两个文字标签和一个指示器，点击可以左右切换，下面空白的地方装载分页，滑动可以左右切换。这是本章要做出来的功能。

2. 制作主界面layout_main.xml

在主界面中，包含了一个顶部的标签栏以及一个可以装载子页面的ViewPager布局。代码如下：

<RelativeLayout 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="match_parent"    android:layout_height="match_parent"    tools:context="com.likianta.anykey.MainActivity">    <!--LinearLayout代替原标题栏的位置-->    <LinearLayout        android:id="@+id/linearLayout"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize">        <!--?attr/actionBarSize表示匹配原actionBar高度-->        <!--显示两个标题-->        <TextView            android:id="@+id/title_all"            android:layout_width="100dp"            android:layout_height="match_parent"            android:layout_gravity="center"            android:layout_weight="1.0"            android:gravity="center_vertical|right"            android:padding="15dp"            android:text="全部"            android:textColor="@color/mycolorText1"            android:textSize="20dp" />        <TextView            android:id="@+id/title_new"            android:layout_width="100dp"            android:layout_height="match_parent"            android:layout_gravity="center"            android:layout_weight="1.0"            android:gravity="center_vertical|left"            android:padding="15dp"            android:text="新增"            android:textColor="@color/mycolorText2"            android:textSize="20dp" />        <!--这里设置的两个文本的初始状态是文字1是深色#000000，文字2是浅色#8e8e8e。        之后会在函数中实现点击变色的功能-->    </LinearLayout>    <!--制作线条，line1是标题栏下的阴影-->    <TextView        android:id="@+id/shadow_line1"        android:layout_width="match_parent"        android:layout_height="1dp"        android:layout_alignBottom="@id/linearLayout"        android:background="@color/mycolorLineShadow" />    <!--indicator是紧贴着文字下面的指示条-->    <ImageView        android:id="@+id/indicator"        android:layout_width="match_parent"        android:layout_height="5dp"        android:layout_above="@id/shadow_line1"        android:scaleType="matrix"        android:src="@drawable/scrollbar" />    <!--制作主体部分viewpager-->    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/shadow_line1">    </android.support.v4.view.ViewPager></RelativeLayout>

其中文字颜色我设置成了自建样式，具体代码可在本文末的《5.2.更新修复》中看到（点此跳转）。

另外，ImageView里面用到的图片：@drawable/scrollbar，这个是我随便截了一个矩形图片然后Ctrl+C -> Ctrl+V进来的

3. 然后制作两个分页

“全部”标签对应的分页：page_item_all.xml
“新增”标签对应的分页：page_item_new.xml

在左分页当中，我们要加载一个卡片列表，所以采用RecyclerView布局。
左分页page_item_all.xml代码如下：

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/recyclerView"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="#3e3e3e"></android.support.v7.widget.RecyclerView>

在右分页当中，我们要制作表单填写的功能，这些内容会在下章讲，所以现在先留空。
右分页page_item_new.xml代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#8e8e8e"></LinearLayout>

完成了两个分页的制作，接下来开始处理滑动逻辑，下面开始是本章的重点内容。

4. MainActivity代码

在MainActivity.java中，我们主要思考以下要做的事情：

1. 加载主界面
2. 点击可切换分页
3. 滑动可切换分页
4. 细节处理：
   
   1. 点击文字变色
   2. 分页切换时指示器（紧挨着标签文字下方的小横条）也要跟着移动

所以在代码中我们也是紧紧围绕以上几点做文章：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private ViewPager viewPager;    private ArrayList<View> pageList;    private TextView titleAll; //标题文字“全部”    private TextView titleNew; //标题文字“新增”    private ImageView indicator; //滚动指示器    private int offset = 0; //滚动条初始偏移量    private int currIndex = 0; //当前页编号    private int bmpW; //滚动条宽度    private int one; //一倍滚动量    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //开始绑定按钮        viewPager = (ViewPager) findViewById(R.id.viewPager);        titleAll = (TextView) findViewById(R.id.title_all);        titleNew = (TextView) findViewById(R.id.title_new);        indicator = (ImageView) findViewById(R.id.indicator);        //用LayoutInflater来绑定布局        LayoutInflater inflater = getLayoutInflater();        View view1 = inflater.inflate(R.layout.page_item_all, null);//先预加载这两个页布局        View view2 = inflater.inflate(R.layout.page_item_new, null);        pageList = new ArrayList<View>();//pageList被实例化为装载View元素的数组        pageList.add(view1);        pageList.add(view2);        //add的先后顺序不要搞错，先add的就是array[0]位置的元素了        //初始化分页适配器功能        PagerAdapter pagerAdapter = new PagerAdapter() {            //参考：https://www.cnblogs.com/weixing/archive/2013/10/11/3363951.html            //获取页卡总数量            @Override            public int getCount() {                return pageList.size();            }            //判断是否由对象生成界面，这个很重要，是用来把pageView数组中的page1和page2生成到当前布局中的方法            @Override            public boolean isViewFromObject(View view, Object object) {                return view == object;            }            //使从ViewGroup中移出当前View            @Override            public void destroyItem(ViewGroup arg0, int arg1, Object arg2) {                ((ViewPager) arg0).removeView(pageList.get(arg1));            }            //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中            @Override            public Object instantiateItem(ViewGroup arg0, int arg1) {                //这个方法用来实例化页卡                ((ViewPager) arg0).addView(pageList.get(arg1));                return pageList.get(arg1);            }        };        //绑定适配器        viewPager.setAdapter(pagerAdapter);        //设置viewPager的初始界面为第一个页面        viewPager.setCurrentItem(0); //这里的0对应的是pageList[0]，也就是page1了        //添加切换界面的监听器        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());        //监听文字被点击        titleAll.setOnClickListener(this);        titleNew.setOnClickListener(this);        //初始化指示器的各项参数        InitScrollbar(bmpW);    }    public void InitScrollbar(int bmpW) {        // 获取滚动条指示器的宽度        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth();        //为了获取屏幕宽度，新建一个DisplayMetrics对象        DisplayMetrics displayMetrics = new DisplayMetrics();        //将当前窗口的一些信息放在DisplayMetrics类中        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);        //从而得到屏幕的宽度        int screenW = displayMetrics.widthPixels;        //初始化滚动条的位置        offset = screenW / 2 - bmpW - 34;        Matrix matrix = new Matrix();        matrix.postTranslate(offset, 0);        indicator.setImageMatrix(matrix);        //计算出切换一个界面时，滚动条的位移量        one = bmpW + 74;    }    //这里是文字被点击时的逻辑    @Override    public void onClick(View view) {        switch (view.getId()) {            case R.id.title_all:                //当点击“全部”标签时，调用左分页的加载                viewPager.setCurrentItem(0);                break;            case R.id.title_new:                //当点击“新增”标签时，调用右分页的加载                viewPager.setCurrentItem(1);                break;        }    }    //页面滚动监听器功能，实现标签页左右滑动切换效果    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {        @Override        public void onPageSelected(int index) {            Animation animation = null;            switch (index) {                case 0:                    titleAll.setTextColor(0xff000000);//0x表示整型，ff表示透明度为0，最后的6位数字表示颜色，必须这样写，不能省略                    titleNew.setTextColor(0xff8e8e8e);                    //该情况下，指示器从右向左移动                    animation = new TranslateAnimation(one, 0, 0, 0);                    //以上四个参数分别代表开始点离x坐标差值，结束点离x坐标差值；开始点离y坐标差值，结束点离y坐标差值                    break;                case 1:                    titleNew.setTextColor(0xff000000);                    titleAll.setTextColor(0xff8e8e8e);                    //该情况下，指示器从左向右移动                    animation = new TranslateAnimation(0, one, 0, 0);                    break;            }            currIndex = index;//使当前页编号等于该值，0表示“全部”页，1表示“新增”页            animation.setFillAfter(true);//将此值设置为true表示指示器将停止在最终移动到的位置上            //动画持续时间，单位为毫秒            animation.setDuration(200);            //开始执行动画            indicator.startAnimation(animation);        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        @Override        public void onPageScrollStateChanged(int arg0) {        }    }}

如果你不喜欢代码中某些变量的命名，可以使用shift+f6批量修改。（详见：http://blog.csdn.net/Likianta/article/details/78612532）

完成后运行，看看效果是否符合预期（当时忘记截图了，下面这张图是包含了下章内容的截图，旧图中分页本该显示的是两种纯色背景）。

---

5. 其他功能更新

5.1. 软键盘按Enter键触发登录按钮

上章制作的登录界面，大家在使用的时候会觉得每次点“进入”之前要先关闭软键盘应该很麻烦，所以在LoginActivity.java中新增一个检测软键盘“Enter”键的功能：

public class LoginActivity extends AppCompatActivity {    ...    //监听软键盘输入，当输入Enter的时候，也能触发上面的登录按钮    etPassword.setOnKeyListener(new View.OnKeyListener() {        @Override        public boolean onKey(View view, int i, KeyEvent keyEvent) {            if (i == keyEvent.KEYCODE_ENTER) {                loginOn.callOnClick(); //callOnClick是performClick的简化版，适合简单触发点击监听事件            }            return false;            /**关于返回值的说明             * 以煮面来举例，返回值为true，表示“这块面交给我了，系统你不要再过问此事”。比如键盘输入“1”，让它发出鸟叫声。则编辑框中不会出现数字1，因为系统不去管这个键了             * 返回值为false，则表示“我过来给这块面加点调料，完了系统你继续煮”。比如键盘输入“1”，不仅能发出鸟叫声，编辑框中也会出现数字1，因为系统要按自己的步伐去执行             * 更多解析见此回答：https://zhidao.baidu.com/question/1430105248859125459.html             */            }        });    ...}

5.2. 将颜色设置为通用的色卡并放到colors.xml文件中

（返回原位置）
界面中经常会重复用到几种固定的颜色，可以将其定义到res/values/colors.xml文件中：

<resources>    <color name="colorPrimary">#3F51B5</color>    <color name="colorPrimaryDark">#303F9F</color>    <color name="colorAccent">#FF4081</color>    <!--自制色卡-->    <color name="mycolorLineShadow">#868686</color>    <color name="mycolorText1">#000000</color>    <color name="mycolorText2">#8e8e8e</color>    <color name="mycolorPurple">#6000c0</color>    <color name="mycolorPurpleInactive">#8668a5</color>    <color name="mycolorBackground">#dedede</color></resources>

使用方法：

<TextView    android:textColor="@color/mycolorText1"    ...></TextView>

---

相关参考

1. Android实现界面左右滑动切换 - Black__Lotus的博客 - CSDN博客 http://m.blog.csdn.net/black__lotus/article/details/50805389?yyue=a21bo.50862.201879
2. Aandroid在ViewPager中添加ListView_zero零零 http://blog.sina.cn/dpool/blog/s/blog_95bc05000101bhxe.html
3. https://zhidao.baidu.com/question/1430105248859125459.html

---

日志

2017年11月17日
1. 【创建】主页面
2. 【修改】解决线条位置的错误

2017年11月20日
1. 【新增】主页面的左右滑动效果
2. 【修改】将颜色设置为通用的色卡并放到colors.xml文件中
3. 【修改】软键盘按Enter键触发登录按钮