android开发之高仿微信6.0+滑动Tab

最新推荐文章于 2023-04-18 18:00:00 发布
最新推荐文章于 2023-04-18 18:00:00 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 开源 android高级 文章标签： 高仿微信 自定义Tabhost Fragment状态保存
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zengdesen/article/details/50165559
版权

上篇博文【android开发之Fragment利用Bundle保存状态】用到滑动切换底部Tab，由于上篇博文的重点是保存Fragment状态，并没有说明，今天来解释一下。

关于高仿微信6.0滑动Tab网上有很多，大部分情况下是自定义View，在OnDraw()进行绘制，本博客的Tab没有自定义View，只是android官方提供的控件进行组合【查看微信布局源码也是这样做的】，性能和实用性请各位同学自测。

微信布局如下图：



按着微信布局进行分析，每个Tab就是一个RelativeLayout，那么我们就可以继承RelativeLayout，添加子控件ImageView和Textview；由于需要实现滑动变色，所以实现双层ImageView和TextView，分别设置绿色图标和灰色图标；

自定义属性attrs.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="WeiXinTabLayoutStyleable">
    <attr name="tabChecked" format="boolean" />
    <attr name="tabTitle" format="string" />
    <attr name="tabTitleSize" format="dimension" />
    <attr name="tabTitleColor" format="color" />
    <attr name="tabIcon" format="reference" />
    <attr name="tabIconOver" format="reference" />
    <attr name="tabLableColor" format="color" />
    <attr name="tabLableText" format="string" />
    <attr name="tabLableTextSize" format="dimension" />
    <attr name="tabLablebackground" format="color"/>
</declare-styleable>

</resources>

代码以及讲解如下：

package cc.mn.tab;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * User: 山野书生(1203596603@qq.com)
 * Date: 2015-11-27
 * Time: 19:32
 * Version 1.0
 */

public class TabView extends RelativeLayout{

    private Context mContext;

    //标题
    private TextView titleTextView;
    private String titleText;
    private int titleColor;
    private static final int titleTextViewID = 10001;
    private int titleNolColor = Color.GRAY;

    //第二层标题
    private TextView titleOverTextView;
    private static final int titleOverTextViewID = 100011;


    //图标
    private ImageView iconImageView;
    private static final int iconImageViewID = 10002;
    private Drawable tabIcon;

    //第二层图标
    private ImageView iconOverImageView;
    private static final int iconOverImageViewID = 100022;
    private Drawable tabIconOver;

    //是否已经被选中
    private boolean isChecked = true;

    //透明度
    private float mAlpha = 1f;

    private String tag = TabView.class.getSimpleName();

    public TabView(Context context) {
        this(context, null);
    }

    public TabView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //获取自定义属性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.WeiXinTabLayoutStyleable);
        //是否是选中状态
        isChecked = ta.getBoolean(R.styleable.WeiXinTabLayoutStyleable_tabChecked, false);
        //标题的颜色，内容
        titleColor = ta.getColor(R.styleable.WeiXinTabLayoutStyleable_tabTitleColor, Color.GRAY);
        titleText = ta.getString(R.styleable.WeiXinTabLayoutStyleable_tabTitle);
        //图标图片
        tabIcon = ta.getDrawable(R.styleable.WeiXinTabLayoutStyleable_tabIcon);
        tabIconOver = ta.getDrawable(R.styleable.WeiXinTabLayoutStyleable_tabIconOver);
        ta.recycle();

        mContext = context;
        initViews();
    }

    /**
     * 初始化控件
     * */
    private void initViews(){
        RelativeLayout.LayoutParams titleLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);
        titleLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        titleLayoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
        //第二层标题
        titleOverTextView = new TextView(mContext);
        titleOverTextView.setId(titleOverTextViewID);
        titleOverTextView.setLayoutParams(titleLayoutParams);
        this.addView(titleOverTextView);
        //标题
        titleTextView = new TextView(mContext);
        titleTextView.setId(titleTextViewID);
        titleTextView.setLayoutParams(titleLayoutParams);
        this.addView(titleTextView);

        //图标LayoutParams
        RelativeLayout.LayoutParams iconLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);
        iconLayoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
        iconLayoutParams.addRule(RelativeLayout.ABOVE, titleTextViewID);
        //第二层图标
        iconOverImageView = new ImageView(mContext);
        iconOverImageView.setId(iconOverImageViewID);
        iconOverImageView.setLayoutParams(iconLayoutParams);
        this.addView(iconOverImageView);
        //图标
        iconImageView = new ImageView(mContext);
        iconImageView.setId(iconImageViewID);
        iconImageView.setLayoutParams(iconLayoutParams);
        this.addView(iconImageView);

        //设置数据，并刷新
        refreshData();
    }

    /**
     * 设置选中状态
     * */
    public void setChecked(boolean isChecked) {
        this.isChecked = isChecked;
        setCheckedData();
    }

    /**
     * 滑动时改变颜色
     * */
    public void onScrolling(float alpha){
        mAlpha = alpha;
        onScrollSetData();
    }

    /**
     * 设置图标
     * */
    private void setTabIconData(){
        iconImageView.setImageDrawable(tabIcon);
        if(isChecked){
            iconImageView.setAlpha(1-mAlpha);
        } else {
            iconImageView.setAlpha(mAlpha);
        }
    }

    /**
     * 设置第二层图标
     * */
    private void setTabIconOverData(){
        iconOverImageView.setImageDrawable(tabIconOver);
        if(isChecked){
            iconOverImageView.setAlpha(mAlpha);
        } else {
            iconOverImageView.setAlpha(1-mAlpha);
        }
    }

    /**
     * 滑动时设置图标透明度以及文字透明度
     * */
    private void onScrollSetData(){
        //设置图标透明度
        iconImageView.setAlpha(1-mAlpha);
        iconOverImageView.setAlpha(mAlpha);
        //设置标题透明度
        titleTextView.setAlpha(1-mAlpha);
        titleOverTextView.setAlpha(mAlpha);
    }

    /**
     * 设置标题数据
     * */
    private void setTitleData(){
        titleTextView.setText(titleText);
        titleTextView.setTextColor(titleNolColor);
        if(isChecked){
            titleTextView.setAlpha(1-mAlpha);
        } else {
            titleTextView.setAlpha(mAlpha);
        }
    }

    /**
     * 设置第二层标题数据
     * */
    private void setTitleOverData(){
        titleOverTextView.setText(titleText);
        titleOverTextView.setTextColor(titleColor);
        if(isChecked){
            titleOverTextView.setAlpha(mAlpha);
        } else {
            titleOverTextView.setAlpha(1-mAlpha);
        }
    }

    /**
     * 选中之后重新设置数据
     * */
    private void setCheckedData(){
        refreshData();
    }

    /**
     * 设置完数据之后刷新
     * */
    private void refreshData(){
        mAlpha = 1.0f;
        setTitleData();
        setTitleOverData();
        setTabIconData();
        setTabIconOverData();
    }

    public String getTitleText() {
        return titleText;
    }

    public void setTitleText(String titleText) {
        this.titleText = titleText;
    }

    public Drawable getTabIcon() {
        return tabIcon;
    }

    public void setTabIcon(Drawable tabIcon) {
        this.tabIcon = tabIcon;
    }

    public boolean isChecked() {
        return isChecked;
    }

    public ImageView getIconImageView() {
        return iconImageView;
    }
}
关键代码： 

/**
     * 设置图标
     * */
    private void setTabIconData(){
        iconImageView.setImageDrawable(tabIcon);
        if(isChecked){
            iconImageView.setAlpha(1-mAlpha);
        } else {
            iconImageView.setAlpha(mAlpha);
        }
    }

    /**
     * 设置第二层图标
     * */
    private void setTabIconOverData(){
        iconOverImageView.setImageDrawable(tabIconOver);
        if(isChecked){
            iconOverImageView.setAlpha(mAlpha);
        } else {
            iconOverImageView.setAlpha(1-mAlpha);
        }
    }

    /**
     * 滑动时设置图标透明度以及文字透明度
     * */
    private void onScrollSetData(){
        //设置图标透明度
        iconImageView.setAlpha(1-mAlpha);
        iconOverImageView.setAlpha(mAlpha);
        //设置标题透明度
        titleTextView.setAlpha(1-mAlpha);
        titleOverTextView.setAlpha(mAlpha);
    }

滑动的时候会调用ViewPager.OnPageChangeListener()里的方法

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
//positionOffset滑动的百分比；

根据百分比设置Alpha值，完成颜色渐变

Ok，这样我们就初步完成了TabView，按着微信的布局，我们还需要一个Linearlayout，接下来，我们继续实现，

新建TabGroupView继承LinearLayout，代码以及讲解如下：

package cc.mn.tab;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

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

/**
 * User: 山野书生(1203596603@qq.com)
 * Date: 2015-11-27
 * Time: 20:35
 * Version 1.0
 */

public class TabGroupView extends LinearLayout {

    private OnItemClickListener onItemClickListener;

    private List<TabView> tabLayouts;

    private String tag = TabGroupView.class.getSimpleName();

    public TabGroupView(Context context) {
        this(context, null);
    }

    public TabGroupView(Context context, AttributeSet attrs) {
        super(context, attrs);
        tabLayouts = new ArrayList<>();
        this.setOrientation(HORIZONTAL); //设置默认为水平布局
    }

    /**
     * 选中某一个
     * */
    public void setCurrentItem(int item){
        changeItem();
        TabView tabLayout = tabLayouts.get(item);
        tabLayout.setChecked(true);
    }

    /**
     * @param position 当前界面索引
     * @param positionOffset 滑动的百分比
     * */
    public void onPageScrolling(int position, float positionOffset) {
        if(positionOffset>0){
            TabView tabLayout = tabLayouts.get(position);
            tabLayout.onScrolling(1-positionOffset);
            if(position+1 < tabLayouts.size()){
                TabView nextTabLayout = tabLayouts.get(position+1);
                nextTabLayout.onScrolling(positionOffset);
            }
        }
    }

    /**
     * 设置监听器
     * */
    private void initListener(){
        int count = this.getChildCount();
        for(int i=0; i<count; i++){
            final TabView tabLayout = (TabView)this.getChildAt(i);
            tabLayouts.add(tabLayout);
            final int finalI = i;
            tabLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    changeItem(); //清除选中状态
                    tabLayout.setChecked(true);
                    if(onItemClickListener!=null){
                        onItemClickListener.onClick(finalI, tabLayout);
                    }
                }
            });
        }
    }

    /**
     * 清除选中状态
     * */
    private void changeItem(){
        for(TabView tabLayout:tabLayouts){
            tabLayout.setChecked(false);
        }
    }

    /**
     * 设置每个Item的监听事件
     * */
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
        initListener();
    }

    /**
     * 点击事件
     * */
    public interface OnItemClickListener{
        void onClick(int position, TabView tabLayout);
    }

    /**
     * 设置只能水平布局
     * */
    @Override
    public void setOrientation(int orientation) {
        super.setOrientation(HORIZONTAL);
    }
}
Ok，高仿微信滑动Tab完成，开始应用；

首先布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <cc.mn.tab.TabGroupView
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/text"
        android:layout_alignParentBottom="true"
        android:id="@+id/group_tab_layout"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        >
        <cc.mn.tab.TabView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/tab_main"
            app:tabTitle="微信"
            app:tabTitleColor="@color/tab_bg_green"
            app:tabIcon="@mipmap/chats"
            app:tabIconOver="@mipmap/chats_green"
            app:tabLablebackground="@color/item_tab_bg"
            app:tabChecked="true"
            />
        <cc.mn.tab.TabView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tabTitle="通讯录"
            app:tabTitleColor="@color/tab_bg_green"
            app:tabLableColor="@color/text"
            app:tabIcon="@mipmap/contacts"
            app:tabIconOver="@mipmap/contacts_green"
            />
        <cc.mn.tab.TabView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/tab_friedns"
            app:tabTitle="发现"
            app:tabTitleColor="@color/tab_bg_green"
            app:tabIcon="@mipmap/discover"
            app:tabIconOver="@mipmap/discover_green"
            />
        <cc.mn.tab.TabView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:tabTitle="我"
            app:tabTitleColor="@color/tab_bg_green"
            app:tabIcon="@mipmap/about_me"
            app:tabIconOver="@mipmap/about_me_green"
            />
    </cc.mn.tab.TabGroupView>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/group_tab_layout"
        android:id="@+id/view_pager"
        />

</RelativeLayout>

在Activity应用： 

package cc.mntabdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;

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

import cc.mn.tab.TabGroupView;
import cc.mn.tab.TabView;

public class MainActivity extends AppCompatActivity implements TabGroupView.OnItemClickListener{

    private TabGroupView group_tab_layout;

    private ViewPager view_pager;

    private List<ContentFragment> list = new ArrayList<>();

    private int mPosition = 0;

    private String tag = MainActivity.class.getSimpleName();

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

        list.add(new ContentFragment("微信"));
        list.add(new ContentFragment("通讯录"));
        list.add(new ContentFragment("发现"));
        list.add(new ContentFragment("我"));

        view_pager = (ViewPager)findViewById(R.id.view_pager);
        group_tab_layout = (TabGroupView)findViewById(R.id.group_tab_layout);
        group_tab_layout.setOnItemClickListener(this);

        view_pager.setAdapter(pagerAdapter);

        view_pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                group_tab_layout.onPageScrolling(position, positionOffset);
            }

            @Override
            public void onPageSelected(int position) {
                mPosition = position;
                group_tab_layout.setCurrentItem(mPosition);
            }

            @Override
            public void onPageScrollStateChanged(int state) { //状态

            }
        });

    }


    //创建适配器
    private FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

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

    @Override
    public void onClick(int position, TabView tabLayout) {
        Log.i(tag, "选中的tablayout=" + position);
        view_pager.setCurrentItem(position, false); //取消动画
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
运行截图：



OK，基本与微信一样，性能和实用性请同学们自测，代码；最新代码添加了BadgeView，下篇博文进行讲解！

关于TabView也可以通过代码进行添加，像Tabhost的一样使用。

山野书生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
第2章第9节：使用TabView包含和切换多个页面 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-02 990
本节课演示TabView标签视图的使用，标签视图位于屏幕的底部，可以让用户在几个页面之间进行快速的切换，效果类似于UITabBarController。 标签视图所控制的页面位于大括号之内。TabView仅支持类型为文本、图像或LayoutView的标签项，其他类型的视图将产生一个可见的空白标签项。 添加一个文本视图，作为标签视图的第一个标签项。 继续添加另一个文本视图，作为标签视图的第二个标签项。 设置第一个文本视图的字体尺寸为36。 接着来设置文本视图的选项卡，只有设置..
Android 高仿微信6.0主界面程序源码
11-13
代码为博客的实例代码：有问题请博客留言http://blog.csdn.net/lmj623565791/article/details/41087219
使用RecyclerView开发TabView
杜壁奇的博客
04-18 656
使用RecyclerView实现TabView
Android—TabView —常见的导航栏——底部选择切换界面
坍塌的博客
07-27 1819
效果图： 字体选择变色以及选择导航图片更换效果 添加引用： 1.在项目的build.gradle里,加入以下代码: implementation 'com.ycl.tabview.library:tabviewlibrary:1.0' 2.更新项目之后就在布局中添加如下代码： <com.ycl.tabview.library.TabView android:id="@+id/tabView" android:layout_width="match_parent"
Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)
m0_60259116的博客
03-02 1242
Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)
SwiftUI初级课程（十）TabView 标签视图控件
qyw2013的专栏
12-30 556
【代码】SwiftUI初级课程（十）TabView 标签视图控件。
Android学习教程之高仿安卓微信6.0（2）
09-01
主要为大家详细介绍了Android学习教程之高仿安卓微信6.0的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
高仿微信6.0
05-24
Android学习，高仿微信6.0，public class ViewPagerAdapter extends FragmentPagerAdapter { /** * 聊天界面 */ private ChatFragment chatFragment; /** * 发现页面 */ private FoungFragment ...
高仿微信6.0主界面
02-01
高仿微信6.0主界面 1.使用viewpager+fragment 编写 主界面的 tab bar; 2.自定义 OverflowButton 修改button 图标； 3.修改 tab 图标颜色 切换； 4.解决内存 杀去导致 图标和view 不一致；
Android高仿微信6.0主界面源代码
03-18
作者：张鸿洋 原理介绍通过效果图，大家可能也猜到了，我们的图标并非是两张图片，而是一张图，并且目标颜色是可定制的。那么我们如何做到，可以让图标随心所遇的变色了，我们实际上还是利用了Paint的Xfermode，...
Android 利用ViewPager实现类微信的左右滑动效果
09-19
Android利用ViewPager实现类微信的左右滑动效果，详细代码注解解析setOnPageChangeListener各参数意义以及使用方法
使用Fragment实现Tab切换（高仿微信）
07-07
使用Activity+Fragment实现Tab切换效果，常见使用场景是应用的主界面，高仿微信。
swipe多种手机触屏滑动效果
09-15
swipe多种手机触屏滑动效果
tabview动态实现视图标签页面+窗口分割+treeview显示内容+动态添加控件+在视图里面画图，带皮肤文件
06-27
包含主要内容：tabview实现视图标签页面+窗口分割+treeview显示内容+动态添加控件+在视图里面画图+链表存储+orale数据库（此程序未带，带了你就运行不了了），可以咨询本人，里面有联系方式）+带皮肤文件 程序用10写的，因为文件有一百多兆，所以我上传时候删除了几个大文件，但是你使用的时候只需要新建一个单文档应用程序，然后把我的那些CPP文件加进去就可以了。 标签视图就是就是类似于tabcontrol控件，但我这个是在主窗口分割视图后将分割的一个视图再次实现标签视图，可以切换，也可以动态实现动态添加视图， 树视图里面写了内容，改变了颜色，写了一个链表存储结构，位图的使用及动态加载，里面还有很多东西，这是我做的一个项目里面一开始的内容。
模仿微信切换
12-05
欢迎免费下载源码
TabView用法
Billy Jue的博客
03-21 4682
//tab切换 TabView { id:tabView; anchors.fill: parent; tabPosition: Qt.BottomEdge; clip: true onCurrentIndexChanged: { switch(currentIndex) ...
LVGL学习记录：按键
moshanghuaw的博客
01-10 4307
程序 #include <lvgl.h> #include <TFT_eSPI.h> /*If you want to use the LVGL examples, make sure to install the lv_examples Arduino library and uncomment the following line. #include <lv_examples.h> */ // #include <lv_demo.h>
Tab选项卡TabView的最基本操作(一)
Android
06-07 3504
首先简单的创建一个Tab有以下步骤： 1、在布局文件中使用FramLayout列出Tab组件及Tab中的内容组件。 2、Activity要继承TabActivity。 3、调用TabActivity的getTabHost()方法获得TabHost对象。 4、通过TabHost创建Tab选项。 以下是创建过程： 1、创建activity_main.xml文件
Android:TabView使用总结
Android
06-07 2887
原帖地址：http://www.cnblogs.com/longlybits/archive/2011/12/01/2270830.html 之前在t.sina.com.cn/kevinlynx陆续贴了些android开发涉及到的一些code snippets，主要目的是记录，供以后需要的时候查阅方便。但是因为miniblog的字数限制，在记录较多信息的时候还是有诸多不便。so,
Android高仿微信
最新发布
09-13
Android高仿微信是指开发一个功能上与微信相似的Android应用。这个应用可以包含微信的基本功能，例如注册登录、添加好友、发送消息、分享图片和视频等。实现高仿微信的关键在于了解微信的UI布局和交互逻辑，并在开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值