ViewPager+RadioGroup仿微信主界面
更新時間：2017年12月29日 13:42:09 作者：虎虎之王
這篇文章主要為大家詳細(xì)介紹了ViewPager+RadioGroup仿微信主界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
話不多說，先上圖，如圖效果，可以點擊底部按鈕選擇頁面，也可以滑動頁面進(jìn)行選擇。
那么我們下面就來實現(xiàn)一下吧。
首先創(chuàng)建工程WXTest,主界面布局使用ViewPager+RadioGroup來實現(xiàn),界面代碼如下。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
<TextView
android:id="@+id/division_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#333333"
android:layout_above="@+id/rg_contain"
/>
<RadioGroup
android:id="@+id/rg_contain"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:gravity="center"
android:background="#ffffff"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rb_wx"
style="@style/BottomTabStyle"
android:checked="true"
android:text="微信"
android:drawableTop="@drawable/tab_radiobutton_wx_selector"
android:textColor="@color/txt_tab_selector"
/>
<RadioButton
android:id="@+id/rb_book"
style="@style/BottomTabStyle"
android:checked="true"
android:text="通訊錄"
android:drawableTop="@drawable/tab_radiobutton_book_selector"
android:textColor="@color/txt_tab_selector"
/>
<RadioButton
android:id="@+id/rb_discover"
style="@style/BottomTabStyle"
android:checked="true"
android:text="發(fā)現(xiàn)"
android:drawableTop="@drawable/tab_radiobutton_discover_selector"
android:textColor="@color/txt_tab_selector"
/>
<RadioButton
android:drawableTop="@drawable/tab_radiobutton_me_selector"
android:id="@+id/rb_me"
style="@style/BottomTabStyle"
android:checked="true"
android:text="我"
android:textColor="@color/txt_tab_selector"
/>
</RadioGroup>
</LinearLayout>
在MainActivity中進(jìn)行初始化數(shù)據(jù)
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mRGContain = (RadioGroup) findViewById(R.id.rg_contain);
mRBWX = (RadioButton) findViewById(R.id.rb_wx);
mRBBook = (RadioButton) findViewById(R.id.rb_book);
mRBDiscover = (RadioButton) findViewById(R.id.rb_discover);
mRBMe = (RadioButton) findViewById(R.id.rb_me);
//給圖標(biāo)設(shè)置大小
Drawable drawableRbWX = mRBWX.getCompoundDrawables()[1];
drawableRbWX.setBounds(0,0, dp2px(24),dp2px(24));
mRBWX.setCompoundDrawables(null,drawableRbWX,null,null);
Drawable drawableRbBook = mRBBook.getCompoundDrawables()[1];
drawableRbBook.setBounds(0,0, dp2px(24), dp2px(24));
mRBBook.setCompoundDrawables(null,drawableRbBook,null,null);
Drawable drawableRbDiscover = mRBDiscover.getCompoundDrawables()[1];
drawableRbDiscover.setBounds(0,0, dp2px(24), dp2px(24));
mRBDiscover.setCompoundDrawables(null,drawableRbDiscover,null,null);
Drawable drawableRbMe = mRBMe.getCompoundDrawables()[1];
drawableRbMe.setBounds(0,0, dp2px(24), dp2px(24));
mRBMe.setCompoundDrawables(null,drawableRbMe,null,null);
/**
* dp 轉(zhuǎn) px
* @param dp
* @return
*/
public int dp2px(int dp) {
// 1、獲取屏幕密度
float density = getApplicationContext().getResources().getDisplayMetrics().density;
// 2、進(jìn)行乘法操作
return (int) (dp * density + 0.5);
}
給ViewPager設(shè)置數(shù)據(jù)我們使用FragmentPagerAdapter ,所以MainActivity需要繼承FragmentActivity。Fragment選擇V4包，可以兼容低版本。
新建BaseFragment繼承Fragment,讓子類實現(xiàn)initView()方法。
public abstract class BaseFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return initView(inflater,container,savedInstanceState);
}
public abstract View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState);
}
微信界面
public class WXFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.wx_fragment, container,false);
return view;
}
}
wx_fragment.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">
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="微信"
android:textSize="15dp"
/>
</LinearLayout>
其余三個界面類似
/**
* 通訊錄界面
*/
public class BookFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.book_fragment, container,false);
return view;
}
}
/**
* 發(fā)現(xiàn)界面
*/
public class DiscoverFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.discover_fragment, container,false);
return view;
}
}
/**
* 我界面
*/
public class MeFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.me_fragment, container,false);
return view;
}
}
然后使用MainFragmentFactory來存儲頁面Fragment
package com.example.wxtest.fragment;
import java.util.HashMap;
public class MainFragmentFactory {
private static HashMap<Integer, BaseFragment> mSavedFragment = new HashMap<Integer, BaseFragment>();
//根據(jù)position得到對應(yīng)的fragment
public static BaseFragment getFragment(int position) {
BaseFragment fragment = mSavedFragment.get(position);
if(fragment == null) {
switch (position) {
case 0:
fragment = new WXFragment();
break;
case 1:
fragment = new BookFragment();
break;
case 2:
fragment = new DiscoverFragment();
break;
case 3:
fragment = new MeFragment();
break;
}
//創(chuàng)建之后保存
mSavedFragment.put(position, fragment);
}
return fragment;
}
public static void deleteFragment(){
for (int i = 0 ; i < 4 ; i++){
mSavedFragment.remove(i);
}
}
}
適配器
/**
* 適配器
*/
class MainFragmentAdapter extends FragmentPagerAdapter {
public MainFragmentAdapter(FragmentManager fm) {
super(fm);
}
//根據(jù)position的值 返回對應(yīng)的fragment對象
@Override
public Fragment getItem(int position) {
Fragment fragment = MainFragmentFactory.getFragment(position);
return fragment;
}
//返回ViewPager要顯示的item數(shù)量
@Override
public int getCount() {
return 4;
}
}
ViewPager設(shè)置數(shù)據(jù)
//給ViewPager設(shè)置數(shù)據(jù) mViewPager.setAdapter(new MainFragmentAdapter(getSupportFragmentManager()));
ViewPager頁面選中監(jiān)聽
//界面改變監(jiān)聽
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//當(dāng)前選中頁面
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
mRGContain.check(R.id.rb_wx);
break;
case 1:
mRGContain.check(R.id.rb_book);
break;
case 2:
mRGContain.check(R.id.rb_discover);
break;
case 3:
mRGContain.check(R.id.rb_me);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
RadioGroup選中監(jiān)聽
//RadioGroup選中監(jiān)聽
mRGContain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.rb_wx: //微信
mViewPager.setCurrentItem(0,false);
break;
case R.id.rb_book: //通訊錄
mViewPager.setCurrentItem(1,false);
break;
case R.id.rb_discover: //發(fā)現(xiàn)
mViewPager.setCurrentItem(2,false);
break;
case R.id.rb_me: //我
mViewPager.setCurrentItem(3,false);
break;
default:
break;
}
}
});
//選中微信界面
mRGContain.check(R.id.rb_wx);
然后運行程序，就可以實現(xiàn)圖中的效果了！
源碼：下載地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天，想在android手機(jī)上安裝兩個相同的應(yīng)用，本以為可以安裝不同版本的，試了幾次，均相互覆蓋了，于是，只能設(shè)法修改apk所對應(yīng)的包名(package name),需要了解的朋友可以參考下2012-12-12
Android實現(xiàn)支持所有View的通用的下拉刷新控件
這篇文章主要介紹了Android實現(xiàn)支持所有View的通用的下拉刷新控件的相關(guān)資料,需要的朋友可以參考下2016-06-06
Android 中出現(xiàn)java.net.BindException: bind failed: EADDRINUSE 問
這篇文章主要介紹了Android 中出現(xiàn)java.net.BindException: bind failed: EADDRINUSE 問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了一個超實用的Android手勢鎖制作實例教程,普通的圓環(huán)形圖標(biāo)變換,在App和系統(tǒng)的鎖屏界面中都可以調(diào)用,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細(xì)介紹了Android繪制動態(tài)折線圖，折線圖隨著手指的滑動進(jìn)行動態(tài)繪制效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Android編程實現(xiàn)兩個Activity相互切換而不使用onCreate()的方法
這篇文章主要介紹了Android編程實現(xiàn)兩個Activity相互切換而不使用onCreate()的方法,結(jié)合實例形式分析了多個Activity切換而不重新創(chuàng)建的操作技巧,需要的朋友可以參考下2017-01-01
Android基于Http協(xié)議實現(xiàn)文件上傳功能的方法
這篇文章主要介紹了Android基于Http協(xié)議實現(xiàn)文件上傳功能的方法,結(jié)合實例形式分析了Android的HTTP協(xié)議原理與文件上傳功能實現(xiàn)技巧,需要的朋友可以參考下2016-07-07
Android使用gradle讀取并保存數(shù)據(jù)到BuildConfg流程詳解
這篇文章主要介紹了Android使用gradle從資源目錄讀取數(shù)據(jù)并存到BuildConfg內(nèi)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
rxjava+retrofit實現(xiàn)多圖上傳實例代碼
本篇文章主要介紹了rxjava+retrofit實現(xiàn)多圖上傳實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了android自定義帶箭頭對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03