02 Anykey左右滑动布局ViewPager

最新推荐文章于 2023-06-20 08:00:00 发布

Likianta Me

最新推荐文章于 2023-06-20 08:00:00 发布

阅读量499

点赞数 1

文章标签： viewpager 分页

本文链接：https://blog.csdn.net/Likianta/article/details/78613582

版权

[教程] 从零开发 Keep Me Safe 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先看一下最终的效果图
制作主界面layout_mainxml
然后制作两个分页
MainActivity代码
其他功能更新
- 1 软键盘按Enter键触发登录按钮
- 2 将颜色设置为通用的色卡并放到colorsxml文件中
相关参考
日志

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

layout_main标题栏效果图

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

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. 分页切换时指示器（紧挨着标签文字下方的小横条）也要跟着移动

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

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>

日志

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

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

Likianta Me

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02 Anykey左右滑动布局ViewPager

目录先看一下最终的效果图制作主界面layout_mainxml然后制作两个分页MainActivity代码其他功能更新1 软键盘按Enter键触发登录按钮2 将颜色设置为通用的色卡并放到colorsxml文件中相关参考日志1. 先看一下最终的效果图如图所示，标题栏有两个文字标签和一个指示器，点击可以左右切换，下面空白的地方装载分页，滑动可以左右切换。这是本章要做出来的功能。2. 制作
复制链接

扫一扫