ViewPager+RadioGroup 实现高仿微信底部栏

作者: TTTqiu | 来源:发表于2016-08-03 16:45 被阅读1129次

ViewPager+RadioGroup 实现高仿微信底部栏
高仿微信底部导航栏动画
高仿微信底部导航栏动画
高仿微信底部实现结果
android仿微信底部导航栏图标颜色渐变效果
Android高仿微信联系人字母导航栏的实现
android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状
Google官方的底部Tab栏设计规范
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
Android 仿微信底部渐变Tab（2）

一、布局

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"
            //  取消自动添加的小圆点按钮
            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="发现"
            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>

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>

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>

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="发现"
        android:textSize="30sp"/>
</RelativeLayout>

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页面切换监听
        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选中状态改变监听
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.chat:
                        /**
                         * setCurrentItem第二个参数控制页面切换动画
                         * true:打开/false:关闭
                         */
                        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：（其他三个类似）

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 文件夹

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>

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>

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>

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>

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>

四、效果

可拖动也可点击图标翻页。

ViewPager+RadioGroup 实现高仿微信底部栏
一、布局 activity_main： view_chat: view_contacts: view_discov...
高仿微信底部导航栏动画
原理首先，项目的架构是一个ViewPager加上底部导航栏，ViewPager的滑动可以产生一个滑动比例，底部导...
高仿微信底部导航栏动画
原文链接: https://juejin.im/post/5d5365876fb9a06b130f1aa6 微信自...
高仿微信底部实现结果
alphatabs
android仿微信底部导航栏图标颜色渐变效果
GradualRadioBar 拿RadioGroup和RadioButton开刀，实现微信底部导航栏图标颜色渐变...
Android高仿微信联系人字母导航栏的实现
Android高仿微信联系人字母导航栏的实现效果如图: 下载地址：https://github.com/zhou...
android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状
Android精选源码轻量级底部导航栏 android手机卫士源码 android实现高仿今日头条源码一个用K...
Google官方的底部Tab栏设计规范
上一篇《仿微信底部Tab栏》中粗略的讲了下底部Tab栏的封装，不少同学在实际运用中发现了一些问题，比如我demo中...
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
霸图镇楼仿闲鱼底部导航栏带有中间凸起图标需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现 Demo地...
Android 仿微信底部渐变Tab（2）
之前写过一篇仿微信底部渐变Tab的文章：Android 仿微信底部渐变Tab 是根据ImageView的tint属...