Android Fragment + ViewPager 实现类微信 底部导航栏 和 显示消息提醒

！学习自菜鸟教程-移动端-Android

图片如下

                  

一、底部导航栏实现

1、TextView 图片和文字的变换，在drawable 中新建文件

图片：tav_record_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/record_normal" android:state_selected="false"/>    <item android:drawable="@drawable/record_pressed" android:state_selected="true"/></selector>

文字颜色：tab_text_color_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="@color/color_green" android:state_selected="true"/>    <item android:color="@android:color/darker_gray" android:state_selected="false" /></selector>

2、消息提醒的红色圆圈

添加一个textView，将属性Layout_marginLeft 设置为负值，则小圆圈会叠在其上面

 <RelativeLayout           android:layout_width="0dp"           android:layout_height="match_parent"           android:layout_weight="1"           android:gravity="center">           <TextView               android:id="@+id/tab_tv_record"               android:layout_width="wrap_content"               android:layout_height="match_parent"               android:layout_marginBottom="5dp"               android:text="记录"               android:textColor="@drawable/tab_text_color_selector"               android:textSize="16sp"               android:gravity="center"               android:drawableTop="@drawable/tab_record_selector"               android:background="@drawable/tab_background_selector"/>           <TextView               android:id="@+id/tab_tv_num_record"               android:layout_width="20dp"               android:layout_height="20dp"               android:gravity="center"               android:background="@drawable/red_ring"               android:layout_toRightOf="@id/tab_tv_record"               android:layout_marginLeft="-16dp"               android:textColor="@android:color/white"               android:visibility="invisible"               />       </RelativeLayout>

二、Fragment的布局和实现：

布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/frag_content">    <TextView        android:id="@+id/frag_tv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="啦啦啦阿拉啦"        android:textSize="20sp"        android:layout_centerInParent="true"        />    <Button        android:id="@+id/frag_btn_show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/frag_tv"        android:layout_marginTop="15dp"        android:text="消息提醒"        android:layout_centerInParent="true"/>    <Button        android:id="@+id/frag_btn_hide"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/frag_btn_show"        android:layout_marginTop="15dp"        android:text="关闭"        android:layout_centerInParent="true"/></RelativeLayout>

实现：

public class RecordFragment extends Fragment implements OnClickListener {    private String text = "";    private TextView mTvTitle = null;    public TextView mTvShow  = null;    public Button mBtnShow = null;    public Button mBtnHide = null;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View contentView = inflater.inflate(R.layout.fragment_layout,container,false);        mTvTitle = (TextView)getActivity().findViewById(R.id.tv_title);        mTvShow = (TextView)contentView.findViewById(R.id.frag_tv);        mBtnShow = (Button)contentView.findViewById(R.id.frag_btn_show);        mBtnHide = (Button)contentView.findViewById(R.id.frag_btn_hide);        mBtnShow.setText("record show");        mBtnHide.setText("record hide");        mBtnShow.setOnClickListener(this);        mBtnHide.setOnClickListener(this);        parserArgument();        return contentView;    }    private void parserArgument(){        text = getArguments().getString("text");        mTvShow.setText(text);        String title = getArguments().getString("title");<span style="white-space:pre"></span>//fragment中获取activity创建时传递的参数        Log.i("onResume--->",title);        mTvTitle.setText(title);    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.frag_btn_show:                Log.i("frag_btn_show","click");                TextView num = (TextView) getActivity().findViewById(R.id.tab_tv_num_record);<span style="white-space:pre"></span>//fragment中获取activity中的组件，设置消息提醒小圆圈                num.setText("11");                num.setVisibility(View.VISIBLE);                break;            case R.id.frag_btn_hide:                Log.i("frag_btn_hide","click");                TextView num1 = (TextView) getActivity().findViewById(R.id.tab_tv_num_record);                num1.setVisibility(View.INVISIBLE);                break;            default:                break;        }    }}

三、ViewPager的运用

1、ViewPager需要适配器 FragmentPagerAdapter

public class FragmentAdapter extends FragmentPagerAdapter {   public final static int FRAGMENT_COUNT = 2;    private RecordFragment recordFragment = null;    private UserFragment userFragment = null;    public FragmentAdapter(FragmentManager manager){        super(manager);        recordFragment = new RecordFragment();        Bundle bundle = new Bundle();        bundle.putString("text","这是 record Fragment");        bundle.putString("title","record");        recordFragment.setArguments(bundle);        userFragment = new UserFragment();        Bundle bundle1 = new Bundle();        bundle1.putString("text","这是 user Fragment");        bundle1.putString("title","user");        userFragment.setArguments(bundle1);    }    @Override    public Fragment getItem(int position) {        Fragment fragment = null;        switch (position){            case MainActivity.FRAGMENT_RECORD:                fragment = recordFragment;                break;            case MainActivity.FRAGMENT_USER:                fragment = userFragment;                break;            default:                break;        }        return fragment;    }    @Override    public int getCount() {        return FRAGMENT_COUNT;    }}

2、ViewPager 设置滑动监听 ViewPager.OnPagerChangeListener

  @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 (viewPager.getCurrentItem()){                case FRAGMENT_RECORD:                    setNotSelected();                    mTvRecord.setSelected(true);                    break;                case FRAGMENT_USER:                    setNotSelected();                    mTvUser.setSelected(true);                    break;                default:                    break;            }        }    }

四、主界面的布局和实现

布局：

<?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:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <TextView        android:id="@+id/tv_title"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:gravity="center"        android:textSize="20sp"/>    <View        android:id="@+id/line_gray"        android:layout_width="match_parent"        android:layout_height="0.5dp"        android:background="@android:color/darker_gray"        android:layout_below="@id/tv_title"/>   <LinearLayout       android:id="@+id/tab_layout"       android:layout_width="match_parent"       android:layout_height="70dp"       android:orientation="horizontal"       android:layout_alignParentBottom="true"      >       <RelativeLayout           android:layout_width="0dp"           android:layout_height="match_parent"           android:layout_weight="1"           android:gravity="center">           <TextView               android:id="@+id/tab_tv_record"               android:layout_width="wrap_content"               android:layout_height="match_parent"               android:layout_marginBottom="5dp"               android:text="记录"               android:textColor="@drawable/tab_text_color_selector"               android:textSize="16sp"               android:gravity="center"               android:drawableTop="@drawable/tab_record_selector"               android:background="@drawable/tab_background_selector"/>           <TextView               android:id="@+id/tab_tv_num_record"               android:layout_width="20dp"               android:layout_height="20dp"               android:gravity="center"               android:background="@drawable/red_ring"               android:layout_toRightOf="@id/tab_tv_record"               android:layout_marginLeft="-16dp"               android:textColor="@android:color/white"               android:visibility="invisible"               />       </RelativeLayout>       <RelativeLayout           android:layout_width="0dp"           android:layout_height="match_parent"           android:layout_weight="1"           android:gravity="center">           <TextView               android:id="@+id/tab_tv_user"               android:layout_width="wrap_content"               android:layout_height="match_parent"               android:layout_marginBottom="5dp"               android:text="用户"               android:textColor="@drawable/tab_text_color_selector"               android:textSize="16sp"               android:gravity="center"               android:drawableTop="@drawable/tab_user_selector"               android:background="@drawable/tab_background_selector"/>           <TextView               android:id="@+id/tab_tv_num_user"               android:layout_width="20dp"               android:layout_height="20dp"               android:gravity="center"               android:background="@drawable/red_ring"               android:layout_toRightOf="@id/tab_tv_user"               android:layout_marginLeft="-16dp"               android:textColor="@android:color/white"               android:visibility="invisible"               />       </RelativeLayout>   </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/line_gray"        android:layout_above="@+id/tab_layout"/></RelativeLayout>

实现：

public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{    private TextView mTvRecord = null;    private TextView mTvUser = null;    private ViewPager viewPager = null;    private FragmentManager manager;    private RecordFragment recordFragment = null;    private UserFragment userFragment = null;    public final static int FRAGMENT_RECORD = 0;    public final static int FRAGMENT_USER = 1;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        manager = getSupportFragmentManager();        initViews();    }    private void initViews() {        mTvRecord = (TextView)findViewById(R.id.tab_tv_record);        mTvUser = (TextView)findViewById(R.id.tab_tv_user);        viewPager = (ViewPager) findViewById(R.id.viewpager);        mTvRecord.setOnClickListener(this);        mTvRecord.performClick();   //选择效果，使界面一打开时，有选中状态        mTvUser.setOnClickListener(this);        FragmentAdapter adatpter = new FragmentAdapter(manager);        viewPager.setAdapter(adatpter);        viewPager.setCurrentItem(FRAGMENT_RECORD);        viewPager.setOnPageChangeListener(this);    }    private void setNotSelected(){        mTvRecord.setSelected(false);        mTvUser.setSelected(false);    }        //当显示fragment时，是通过add和show时，需要先隐藏当前的，在显示新的    private void hideAllFragment(FragmentTransaction transaction){        if (recordFragment != null){           transaction.hide(recordFragment);        }        if (userFragment != null){            transaction.hide(userFragment);        }    }    @Override    public void onClick(View v) {        FragmentTransaction transaction = manager.beginTransaction();       //transaction只能调用一次，每次需重新创建        switch (v.getId()){            case R.id.tab_tv_record:                setNotSelected();                mTvRecord.setSelected(true);                viewPager.setCurrentItem(FRAGMENT_RECORD);                break;            case R.id.tab_tv_user:                setNotSelected();                mTvUser.setSelected(true);                viewPager.setCurrentItem(FRAGMENT_USER);                break;            default:                break;        }        transaction.commit();    }    @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 (viewPager.getCurrentItem()){                case FRAGMENT_RECORD:                    setNotSelected();                    mTvRecord.setSelected(true);                    break;                case FRAGMENT_USER:                    setNotSelected();                    mTvUser.setSelected(true);                    break;                default:                    break;            }        }    }}

项目代码  TestFragment.rar