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; //一倍滚动量@Overrideprotected 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//获取页卡总数量@Overridepublic int getCount() {return pageList.size();}//判断是否由对象生成界面，这个很重要，是用来把pageView数组中的page1和page2生成到当前布局中的方法@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}//使从ViewGroup中移出当前View@Overridepublic void destroyItem(ViewGroup arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView(pageList.get(arg1));}//返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中@Overridepublic 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;}//这里是文字被点击时的逻辑@Overridepublic 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 {@Overridepublic 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);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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() {@Overridepublic 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键触发登录按钮