ViewPager+RadioGroup 實(shí)現(xiàn)高仿微信底部欄

一是掰、布局


  1. activity_main:
<?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"
    tools:context="com.example.ttt.wechattest.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#51bebebe"/>

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/chat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="微信"
            //  文字上部圖片
            android:drawableTop="@drawable/chat_selector"
            android:textSize="14sp"
            android:textColor="@drawable/color_selector"
            android:gravity="center"
            //  取消自動(dòng)添加的小圓點(diǎn)按鈕
            android:button="@null"
            android:checked="true" />

        <RadioButton
            android:id="@+id/contacts"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="通訊錄"
            android:drawableTop="@drawable/contacts_selector"
            android:textSize="14sp"
            android:textColor="@drawable/color_selector"
            android:gravity="center"
            android:button="@null" />

        <RadioButton
            android:id="@+id/discovery"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="發(fā)現(xiàn)"
            android:drawableTop="@drawable/discovery_selector"
            android:textSize="14sp"
            android:textColor="@drawable/color_selector"
            android:gravity="center"
            android:button="@null" />

        <RadioButton
            android:id="@+id/me"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="我"
            android:drawableTop="@drawable/me_selector"
            android:textSize="14sp"
            android:textColor="@drawable/color_selector"
            android:gravity="center"
            android:button="@null"/>
    </RadioGroup>
</LinearLayout>
  1. view_chat:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66999999">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="微信"
        android:textSize="30sp"/>
</RelativeLayout>
  1. view_contacts:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66999999">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="通訊錄"
        android:textSize="30sp"/>
</RelativeLayout>
  1. view_discovery:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66999999">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="發(fā)現(xiàn)"
        android:textSize="30sp"/>
</RelativeLayout>
  1. view_me:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66999999">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="我"
        android:textSize="30sp"/>
</RelativeLayout>

二复凳、代碼


package com.example.ttt.wechattest;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioGroup;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private RadioGroup radioGroup;
    private List<Fragment> fragmentList=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager=(ViewPager)findViewById(R.id.view_pager);
        radioGroup=(RadioGroup)findViewById(R.id.radio_group);

        ChatFragment chatFragment=new ChatFragment();
        ContactsFragment contactsFragment=new ContactsFragment();
        DiscoveryFragment discoveryFragment=new DiscoveryFragment();
        MeFragment meFragment=new MeFragment();

        fragmentList.add(chatFragment);
        fragmentList.add(contactsFragment);
        fragmentList.add(discoveryFragment);
        fragmentList.add(meFragment);

        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(),fragmentList));

        // ViewPager頁(yè)面切換監(jiān)聽(tīng)
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        radioGroup.check(R.id.chat);
                        break;
                    case 1:
                        radioGroup.check(R.id.contacts);
                        break;
                    case 2:
                        radioGroup.check(R.id.discovery);
                        break;
                    case 3:
                        radioGroup.check(R.id.me);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        // RadioGroup選中狀態(tài)改變監(jiān)聽(tīng)
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.chat:
                        /**
                         * setCurrentItem第二個(gè)參數(shù)控制頁(yè)面切換動(dòng)畫(huà)
                         * true:打開(kāi)/false:關(guān)閉
                         */
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.contacts:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.discovery:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.me:
                        viewPager.setCurrentItem(3);
                        break;
                    default:
                        break;
                }
            }
        });
    }
}

MyFragmentPagerAdapter:

package com.example.ttt.wechattest;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

    private List<Fragment> list;

    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list){
        super(fm);
        this.list=list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}

ChatFragment:(其他三個(gè)類(lèi)似)

package com.example.ttt.wechattest;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ChatFragment extends Fragment{

    public ChatFragment(){

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.view_chat,container,false);
    }
}

三丽啡、drawable 文件夾


  1. chat_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/chat_press"/>
    <item android:state_checked="false" android:drawable="@mipmap/chat_normal"/>
</selector>
  1. contacts_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/contacts_press"/>
    <item android:state_checked="false" android:drawable="@mipmap/contacts_normal"/>
</selector>
  1. discovery_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/discovery_press"/>
    <item android:state_checked="false" android:drawable="@mipmap/discovery_normal"/>
</selector>
  1. me_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/me_press"/>
    <item android:state_checked="false" android:drawable="@mipmap/me_normal"/>
</selector>
  1. color_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/green"/>
    <item android:state_checked="false" android:color="@color/gray"/>
</selector>

四谋右、效果


  • 可拖動(dòng)也可點(diǎn)擊圖標(biāo)翻頁(yè)。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末补箍,一起剝皮案震驚了整個(gè)濱河市改执,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌坑雅,老刑警劉巖辈挂,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異霞丧,居然都是意外死亡呢岗,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)蛹尝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人悉尾,你說(shuō)我怎么就攤上這事突那。” “怎么了构眯?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵愕难,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我惫霸,道長(zhǎng)猫缭,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任壹店,我火速辦了婚禮猜丹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘硅卢。我一直安慰自己射窒,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布将塑。 她就那樣靜靜地躺著脉顿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪点寥。 梳的紋絲不亂的頭發(fā)上艾疟,一...
    開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼蔽莱。 笑死误褪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的碾褂。 我是一名探鬼主播兽间,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼正塌!你這毒婦竟也來(lái)了嘀略?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤乓诽,失蹤者是張志新(化名)和其女友劉穎帜羊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體鸠天,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡讼育,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了稠集。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奶段。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖剥纷,靈堂內(nèi)的尸體忽然破棺而出痹籍,到底是詐尸還是另有隱情,我是刑警寧澤晦鞋,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布蹲缠,位于F島的核電站,受9級(jí)特大地震影響悠垛,放射性物質(zhì)發(fā)生泄漏线定。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一确买、第九天 我趴在偏房一處隱蔽的房頂上張望斤讥。 院中可真熱鬧,春花似錦拇惋、人聲如沸周偎。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蓉坎。三九已至,卻和暖如春胡嘿,著一層夾襖步出監(jiān)牢的瞬間蛉艾,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留勿侯,地道東北人拓瞪。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像助琐,于是被迫代替她去往敵國(guó)和親祭埂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容