Android项目常用内容之底部ViewPager滑动导航

来源：互联网发布：java配置文件格式编辑：程序博客网时间：2024/05/14 17:25

PS：突然觉得android学到的东西，还是做一些整合，在文中的要点写下来有利于更知识的总结。所以就将这几年学到的，领悟到的，在这里做一些随手记录。仅做为一些随笔，但也希望能帮助到一些有需要的朋友。

制作Android的有两大软件，eclipse，Android studio，而现今的趋势已经倒向Android studio。Android软件的主界面也是从策划倒向更简洁的底部滑动导航栏，因此如果有入门的朋友，我还是推荐直接使用渐渐趋于主流的Android studio跟底部滑动导航。

效果预览

首先要注意的一点，隐藏顶部导航栏，就是AndroidManifest.xml把theme改成如下代码

android:theme="@style/Theme.AppCompat.NoActionBar"

要说明的是，当我们左右滑动的时候，底部的图标跟文字会变色，因此我们要在drawable中先写出底部的资源文件

图片资源tab_vpage_one.xml：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@mipmap/tab_vpage_one_ui" android:state_checked="true"></item>    <item android:drawable="@mipmap/tab_vpage_one"></item></selector>

还有其他三个文件，这里就不多写了

接下来是文字资源tab_vpage_text.xml：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="#FFC800" android:state_checked="true"></item>    <item android:color="#8D7A71" ></item></selector>

还有最后图标的背景颜色tab_vpage_background.xml：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="#FFC800" android:state_checked="true"></item>    <item android:color="#8D7A71" ></item></selector>

接下来我们要将他们在activity中显示出来activity_main.xml：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#00F1F1F1"    tools:context="com.zking.g150820_android_vpage.MainActivity">    <RelativeLayout        android:id="@+id/ly_top_bar"        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="#FCFCFC"        >        <TextView            android:id="@+id/txt_topbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_centerInParent="true"            android:gravity="center"            android:text="vpage"            android:textColor="#694E42"            android:textSize="18sp"            />        <View            android:layout_width="match_parent"            android:layout_height="2px"            android:layout_alignParentBottom="true"            android:background="#E5E5E5"></View>    </RelativeLayout>    <RadioGroup        android:id="@+id/rg_tab_bar"        android:layout_width="match_parent"        android:layout_height="56dp"        android:layout_alignParentBottom="true"        android:background="#FFFFFF"        android:orientation="horizontal"        >        <RadioButton            android:id="@+id/rb_channel"            style="@style/tab_menu_item"            android:drawableTop="@drawable/tab_vpage_one"            android:text="one"            />        <RadioButton            android:id="@+id/rb_message"            style="@style/tab_menu_item"            android:drawableTop="@drawable/tab_vpage_two"            android:text="two"            />        <RadioButton            android:id="@+id/rb_better"            style="@style/tab_menu_item"            android:drawableTop="@drawable/tab_vpage_three"            android:text="three" />        <RadioButton            android:id="@+id/rb_setting"            style="@style/tab_menu_item"            android:drawableTop="@drawable/tab_vpage_four"            android:text="four"/>    </RadioGroup>    <View        android:id="@+id/div_tab_bar"        android:layout_width="match_parent"        android:layout_height="2px"        android:layout_above="@+id/rg_tab_bar"        android:background="#E5E5E5"        ></View>    <android.support.v4.view.ViewPager        android:id="@+id/vpage"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/div_tab_bar"        android:layout_below="@+id/ly_top_bar"        ></android.support.v4.view.ViewPager></RelativeLayout>

因为他们四个控件在显示activity中，中间重复的代码太多，所以这这里做了一点点的小优化。

在Styles.xml中加入他们四个控件会重复的代码，如下：

<style name="tab_menu_item">        <item name="android:layout_width">0dp</item>        <item name="android:layout_height">match_parent</item>        <item name="android:layout_weight">1</item>        <item name="android:background">@drawable/tab_vpage_background</item>        <item name="android:button">@null</item>        <item name="android:gravity">center</item>        <item name="android:paddingTop">3dp</item>        <item name="android:textColor">@drawable/tab_vpage_text</item>        <item name="android:textSize">18sp</item>    </style>

然后如Activity一样用style="@style/tab_menu_item"引用就可以了

编写Fragment的布局fg_content.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#FFFFFF"    >    <TextView        android:id="@+id/tex_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="呵呵"        android:textColor="#FFC800"        android:textSize="20sp"        /></LinearLayout>

第一个碎片MyFragment1：

package com.zking.g150820_android_vpage;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by Administrator on 2017/1/9. */public class MyFragment1 extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_content,container,false);        TextView tex_content = (TextView) view.findViewById(R.id.tex_content);        tex_content.setText("第一个Fragment");        return view;    }}

其他三个如同

自定义适配器MyFragmentPagerAdapter：

package com.zking.g150820_android_vpage;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.view.ViewGroup;/** * Created by Administrator on 2017/1/9. */public class MyFragmentPagerAdapter extends FragmentPagerAdapter{    private final int PAGER_COUNT=4;    private MyFragment1 myFragment1 =null;    private MyFragment2 myFragment2 =null;    private MyFragment3 myFragment3 =null;    private MyFragment4 myFragment4 =null;    public MyFragmentPagerAdapter(FragmentManager fm) {        super(fm);        myFragment1 = new MyFragment1();        myFragment2 = new MyFragment2();        myFragment3 = new MyFragment3();        myFragment4 = new MyFragment4();    }    @Override    public int getCount() {        return PAGER_COUNT;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        return super.instantiateItem(container, position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        System.out.println("position Destory"+ position);        super.destroyItem(container, position, object);    }    @Override    public Fragment getItem(int position) {        Fragment fragment = null;        switch (position){            case MainActivity.PAGE_ONE:                fragment = myFragment1;                break;            case MainActivity.PAGE_TWO:                fragment = myFragment2;                break;            case MainActivity.PAGE_THREE:                fragment = myFragment3;                break;            case MainActivity.PAGE_FOUR:                fragment = myFragment4;                break;        }        return fragment;    }}

最后，MainActivity：

package com.zking.g150820_android_vpage;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widget.TextView;public class MainActivity extends AppCompatActivity implements RadioGroup.OnAttachStateChangeListener,ViewPager.OnPageChangeListener, RadioGroup.OnCheckedChangeListener {    private MyFragmentPagerAdapter myFragmentPagerAdapter;    //几个代表页面的常量    public static final int PAGE_ONE=0;    public static final int PAGE_TWO=1;    public static final int PAGE_THREE=2;    public static final int PAGE_FOUR=3;    private TextView tex_content;    private RadioGroup rg_tab_bar;    private RadioButton rb_channel;    private RadioButton rb_message;    private RadioButton rb_better;    private RadioButton rb_setting;    private ViewPager vpage;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());        bindViews();        rb_channel.setChecked(true);    }    private void bindViews(){        tex_content = (TextView) findViewById(R.id.tex_content);        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);        rb_channel = (RadioButton) findViewById(R.id.rb_channel);        rb_message = (RadioButton) findViewById(R.id.rb_message);        rb_better = (RadioButton) findViewById(R.id.rb_better);        rb_setting = (RadioButton) findViewById(R.id.rb_setting);        rg_tab_bar.setOnCheckedChangeListener(this);        vpage = (ViewPager) findViewById(R.id.vpage);        vpage.setAdapter(myFragmentPagerAdapter);        vpage.setCurrentItem(0);        vpage.addOnPageChangeListener(this);    }    @Override    public void onCheckedChanged(RadioGroup group, int checkedId) {        switch (checkedId) {            case R.id.rb_channel:                vpage.setCurrentItem(PAGE_ONE);                break;            case R.id.rb_message:                vpage.setCurrentItem(PAGE_TWO);                break;            case R.id.rb_better:                vpage.setCurrentItem(PAGE_THREE);                break;            case R.id.rb_setting:                vpage.setCurrentItem(PAGE_FOUR);                break;        }    }    //重写ViewPager页面切换的处理方法    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕        if (state == 2){            switch (vpage.getCurrentItem()){                case PAGE_ONE:                    rb_channel.setChecked(true);                    break;                case PAGE_TWO:                    rb_message.setChecked(true);                    break;                case PAGE_THREE:                    rb_better.setChecked(true);                    break;                case PAGE_FOUR:                    rb_setting.setChecked(true);                    break;            }        }    }    @Override    public void onViewAttachedToWindow(View v) {    }    @Override    public void onViewDetachedFromWindow(View v) {    }}

之后就能实现效果了，让我们再看看效果图

代码有点多，细节就不过多的解释了，大致的流程就是这样。

祝君学途愉快。

最后附上源代码：

点击打开链接

0 0