仿微信6.0 主界面 导航：左右滑动的ViewPager+渐变色的底部菜单

最新推荐文章于 2023-06-20 21:42:28 发布
最新推荐文章于 2023-06-20 21:42:28 发布
阅读量3.1k 收藏 3
点赞数 1
文章标签： 微信 导航 viewpager 颜色渐变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BigiEgg/article/details/41496137
版权

本项目 封面图：

思路：

body部分用ViewPager ，底部的图片渐变 ，可以调整两张重叠图片的透明度来实现。



1.底部的导航菜单，是自定义的一个布局。代码如下：

package com.sample.wechat.view;

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

import com.sample.wechat.R;




import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
 * 定制的 组件
 *  描述：
 *  	横向排列N个条目组件
 *  关联Resource:
 *  	layout: 	custom_radio_button.xml
 *  	drawable: 	page_indicator_focused.png		
 */

@SuppressLint("NewApi") public class CustomRadioGroup extends LinearLayout{
	/**
	 * IMAGE/TEXT 	:	条目的图片/文字  
	 * START/DIF	: 	初始值/和目标的差值
	 * R/G/B		：  	目标颜色RGB格式下的R/G/B
	 */
	private static final int TEXT_START_COLOR=Color.GRAY,END_COLOR=Color.parseColor("#45c01a"),
			TEXT_START_R=Color.red(TEXT_START_COLOR),		TEXT_START_G=Color.green(TEXT_START_COLOR),			TEXT_START_B=Color.blue(TEXT_START_COLOR),
			TEXT_DIF_R=Color.red(END_COLOR)-TEXT_START_R,	TEXT_DIF_G=Color.green(END_COLOR)-TEXT_START_G,		TEXT_DIF_B=Color.blue(END_COLOR)-TEXT_START_B;
	;
	//相关的资源ID：
	private final int ID_LAYOUT=R.layout.custom_radio_button,ID_IMAGE_TOP=R.id.custom_radio_button_image_top,ID_IMAGE_BOTTOM=R.id.custom_radio_button_image_botom,ID_TEXT=R.id.custom_radio_button_text,ID_NEWS=R.id.custom_radio_button_news;
	//条目变更监听
	private OnItemChangedListener onItemChangedListener;
	//条目的LinearLayout.LayoutParams
	private LayoutParams itemLayoutParams=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
	private LayoutInflater inflater;
	//当前选择的条目
	private int checkedIndex=0;
	//条目列表
	private List<RadioButton> lists=new ArrayList<CustomRadioGroup.RadioButton>();
	public CustomRadioGroup(Context c) {
		super(c);
		init();
	}
	public CustomRadioGroup(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();	
	}
	/**
	 * 构造函数里适用的初始化部分
	 */
	private void init() {
		inflater=LayoutInflater.from(getContext());
		itemLayoutParams.weight=1;
		setOrientation(HORIZONTAL);
	}
	/**
	 * @param f 		颜色渐变参考值。
	 */
	private static int getNewColor(float f){
		int newR,newG,newB;
		newR=(int)(TEXT_DIF_R*f)+TEXT_START_R;
		newG=(int)(TEXT_DIF_G*f)+TEXT_START_G;
		newB=(int)(TEXT_DIF_B*f)+TEXT_START_B;
		return Color.rgb(newR, newG, newB);
	}
	/**
	 * 添加条目
	 * @param unSelected 没有选中时的图片
	 * @param selected	 选中时的图片
	 * @param text		 文本内容
	 */
	public void addItem(int unSelected,int selected,String text){
		RadioButton rb=new RadioButton(unSelected,selected,text);
		final int i=lists.size();
		rb.v.setOnClickListener(new OnClickListener() {
			public void onClick(View arg0) {
				setCheckedIndex(i);
			}
		});
		addView(rb.v);
		lists.add(rb);
	}
	/**
	 * 获取选中的条目索引
	 */
	public int getCheckedIndex() {
		return checkedIndex;
	}	
	/**
	 * 两个item 改变透明度
	 * @param leftIndex 	左边的条目索引
	 * @param rightIndex	右边的条目索引
	 * @param alpha			[0,1)透明度
	 */
	public void itemChangeChecked(int leftIndex,int rightIndex,float alpha){
		if (leftIndex<0||leftIndex>=lists.size()||rightIndex<0||rightIndex>=lists.size()) {
			return ;
		}
		RadioButton a=lists.get(leftIndex);
		RadioButton b=lists.get(rightIndex);
		a.top.setAlpha(alpha);
		a.bottom.setAlpha(1-alpha);
		b.top.setAlpha(1-alpha);
		b.bottom.setAlpha(alpha);
		int aColor=getNewColor(1-alpha);
		int bColor=getNewColor(alpha);
		a.text.setTextColor(aColor);
		b.text.setTextColor(bColor);
	}
	/**
	 * 选择制定索引的条目
	 */
	public void setCheckedIndex(int index) {
		for (int i = 0; i < lists.size(); i++) {
			if (i==index) {
				lists.get(i).setCheceked(true);
				lists.get(i).text.setTextColor(END_COLOR);
			}else{
				lists.get(i).setCheceked(false);
				lists.get(i).text.setTextColor(TEXT_START_COLOR);
			}
		}
		this.checkedIndex=index;
		if (this.onItemChangedListener!=null) {
			onItemChangedListener.onItemChanged();
		}
	}
	/**
	 * 设置指定索引的条目的消息数量
	 * @param index 条目的索引 
	 * @param count	消息的数量
	 */
	public void setItemNewsCount(int index,int count){
		lists.get(index).setNewsCount(count);
	}
	
	/**
	 * 设置条目变更监听器
	 * @param onItemChangedListener
	 */
	public void setOnItemChangedListener(OnItemChangedListener onItemChangedListener) {
		this.onItemChangedListener = onItemChangedListener;
	}
	
	/**
	 * 自定义的RadioButton
	 */
    private	class RadioButton {
		View v;				//条目样式
		ImageView top,bottom;	//条目的图片
		TextView text,news;	//条目的文字，消息
		public RadioButton(int unSelected,int selected,String string) {
			v=inflater.inflate(ID_LAYOUT, null);
			top=(ImageView)v.findViewById(ID_IMAGE_TOP);
			bottom=(ImageView)v.findViewById(ID_IMAGE_BOTTOM);
			text=(TextView)v.findViewById(ID_TEXT);
			news=(TextView)v.findViewById(ID_NEWS);
			
			top.setImageResource(unSelected);
			top.setAlpha(1.0f);
			bottom.setImageResource(selected);
			bottom.setAlpha(0.0f);
			text.setText(string);
			news.setVisibility(INVISIBLE);
			v.setLayoutParams(itemLayoutParams);
		}
		/**
		 * 设置消息数量
		 * @param count 消息数量为0,不显示news的TextView，消息数量>0 显示news的TextView
		 */
		void setCheceked(boolean b){
			if (b) {
				top.setAlpha(0.0f);
				bottom.setAlpha(1.0f);
			}else{
				top.setAlpha(1.0f);
				bottom.setAlpha(0.0f);
			}
		}
		
		void setNewsCount(int count){
			if (count<=0) {
				news.setVisibility(INVISIBLE);
			}else {
				news.setText(count+"");
				news.setVisibility(VISIBLE);
			}
		}
	}
	/**
	 * 条目变更监听接口
	 */
	public interface OnItemChangedListener{
		public void onItemChanged();
	}
}

它关联的图片，是一个红色的圆形，而关联的XML文件如下：

<?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="wrap_content" 
    android:background="@android:color/white">
	<LinearLayout 
	    android:id="@+id/custom_radio_button_main"
	    android:layout_width="wrap_content"
	    android:paddingTop="5dp"
	    android:layout_height="54dp"
	    android:layout_centerInParent="true"
	    android:orientation="vertical"
	    android:gravity="center_horizontal"
	    android:background="@android:color/white"
	    android:baselineAligned="false"
	    >
		<FrameLayout 
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    >
	   	<ImageView 
            android:id="@+id/custom_radio_button_image_botom"
            android:contentDescription="@string/hello_world"
            android:layout_width="32dp"
            android:layout_height="28dp"
            android:src="@drawable/ic_launcher"
            android:background="@android:color/transparent"
            android:scaleType="fitCenter"
            />
	   	<ImageView 
            android:id="@+id/custom_radio_button_image_top"
            android:contentDescription="@string/hello_world"
            android:layout_width="32dp"
            android:layout_height="28dp"
            android:src="@drawable/ic_launcher"
            android:background="@android:color/transparent"
            android:scaleType="fitCenter"
            />
		</FrameLayout>
	    <TextView 
	        android:id="@+id/custom_radio_button_text"
			android:text="@string/app_name"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:gravity="center"
	        />
	</LinearLayout>
	<TextView 
	    android:layout_alignTop="@id/custom_radio_button_main"
	    android:layout_toRightOf="@id/custom_radio_button_main"
	    android:id="@+id/custom_radio_button_news"
	    android:layout_width="20dp"
	    android:layout_height="20dp"
	    android:layout_marginTop="5dp"
	    android:background="@drawable/news_bg"
	    android:layout_marginLeft="-10dp"
	    android:textColor="@android:color/white"
	    android:gravity="center"
	    />

</RelativeLayout>

2. 使用举例

 主布局为：

<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="com.sample.wechat.MainActivity" >

    <com.sample.wechat.view.CustomRadioGroup 
        android:id="@+id/main_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        ></com.sample.wechat.view.CustomRadioGroup>
    <android.support.v4.view.ViewPager
        android:id="@+id/main_body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/main_footer"
        ></android.support.v4.view.ViewPager>
</RelativeLayout>

 Activity为： 

package com.sample.wechat;

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

import com.sample.wechat.view.CustomRadioGroup;
import com.sample.wechat.view.CustomRadioGroup.OnItemChangedListener;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;


public class MainActivity extends FragmentActivity {
	private CustomRadioGroup footer;
	private ViewPager body;
	private int[] itemImage={R.drawable.main_footer_message,R.drawable.main_footer_contanct,R.drawable.main_footer_discovery,R.drawable.main_footer_me};
	private int[] itemCheckedImage={R.drawable.main_footer_message_selected,R.drawable.main_footer_contanct_selected,R.drawable.main_footer_discovery_selected,R.drawable.main_footer_me_selected};
	private String[] itemText={"微信","通讯录","发现","我"};
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initContentView();
    }
	public void initContentView() {
		// 底部
		footer=(CustomRadioGroup)findViewById(R.id.main_footer);
		for (int i = 0; i < itemImage.length; i++) {
			footer.addItem(itemImage[i],itemCheckedImage[i],itemText[i]);
		}
		//主体
		body=(ViewPager)findViewById(R.id.main_body);
		body.setAdapter(new BodyPageAdapter());
		final MainBodyPageChangeListener bodyChangeListener=new MainBodyPageChangeListener(footer);
		body.setOnPageChangeListener(bodyChangeListener);
		
		footer.setCheckedIndex(body.getCurrentItem());
		footer.setOnItemChangedListener(new OnItemChangedListener() {
			public void onItemChanged() {
				body.setCurrentItem(footer.getCheckedIndex(),false);
			}
		});
		/**
		 * BUG :显示不出数字。数字尺寸太大
		 */
		footer.setItemNewsCount(1, 10);//设置消息数量
		
	}
    class BodyPageAdapter extends PagerAdapter{
    	private int[] pageLayouts={R.layout.main_body_page_a,R.layout.main_body_page_b,R.layout.main_body_page_c,R.layout.main_body_pager_d};
    	private List<View> lists=new ArrayList<View>();
    	public BodyPageAdapter() {
    		for (int i = 0; i < pageLayouts.length; i++) {
				View v=getLayoutInflater().inflate(pageLayouts[i], null);
				lists.add(v);
			}
    	}
		public int getCount() {
			return lists.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0==arg1;
		}
    	@Override
    	public Object instantiateItem(ViewGroup container, int position) {
    		View v=lists.get(position);
    		container.addView(v);
    		return v;
    	}
    	@Override
    	public void destroyItem(ViewGroup container, int position, Object object) {
    		container.removeView(lists.get(position));
    	}
    }
    
    class MainBodyPageChangeListener implements OnPageChangeListener{
    	private CustomRadioGroup customRadioGroup;
    	public MainBodyPageChangeListener(CustomRadioGroup c) {
    		this.customRadioGroup=c;
    	}
    	public void onPageScrollStateChanged(int arg0) {
    	}
    	public void onPageScrolled(int arg0, float arg1, int arg2){
    		if (arg1!=0.0f) {
    			int right,left;
    			if (arg0==customRadioGroup.getCheckedIndex()) {
    				//方向向右
    				left=customRadioGroup.getCheckedIndex();
    				right=customRadioGroup.getCheckedIndex()+1;
    			}else{
    				//方向向左
    				left=customRadioGroup.getCheckedIndex()-1;
    				right=customRadioGroup.getCheckedIndex();
    				
    			}
    			customRadioGroup.itemChangeChecked(left, right, arg1);
    		}else{
    			customRadioGroup.setCheckedIndex(arg0);
    		}
    	}
    	public void onPageSelected(int arg0){
    	}

    }

}

部分，问题说明：

1.源码是一个Eclipse项目，使用的编码格式为UTF-8

2.设置透明度，对API的要求大于11。

源码链接：项目源代码 下载

BigiEgg
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
android仿微信6.0底部滑动菜单栏+导航栏,ViewPager+RadioGroup+ActionBar
11-20
在仿微信6.0的底部菜单栏中，`ViewPager`通常用于承载各个主界面，当用户点击底部菜单时，`ViewPager`会根据选择切换到相应的页面。开发者需要创建一个适配器（如`FragmentPagerAdapter`或`...
ViewPager2+Fragment实现懒加载
u011210902的博客
09-09 2847
ViewPager2+Fragment实现懒加载
仿 今日头条布局：TabLayout+ViewPager+Fragment+ListView多条目加载+Webview
IT666DHW的博客
09-12 2814
一.  MainActivity.java： import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.Vie
手机直播源码，使用ViewPager2实现页面滑动切换
云豹网络科技
02-03 299
在很多应用中，我们经常会看到多个页面之间滑动切换的场景，ViewPager2是ViewPager的升级版，本文将简要介绍如何使用ViewPager2、FragmentStateAdapter和Fragment来实现页面之间的滑动切换。或者在代码中调用ViewPager2的setOrientation(ViewPager2.ORIENTATION_VERTICAL)方法也可以让ViewPager2实现垂直方向的滑动。手机直播源码，使用ViewPager2实现页面滑动切换。2.实现页面滑动切换。
Android编程心得-使用ActionBar+Fragment+ViewPager实现动态切换Menu效果
xiao聪聪的技术Blog
08-26 1万+
1.首先上效果图 2.本例实现的效果主要适用于当前页面有多个页签时，进行Fragment切换时，可以利用不同的Menu样式与当前Fragment中的内容进行配合，可以大大增加复用性，看到效果图后，下面我来介绍我实现这一效果的主要步骤 2.1  因为此处我有3个样式，那么我需要在res/menu 文件夹下创建三个文件,style1.xml,style2.xml,style
9).Android Jetpack 一个demo两分钟ViewPager2 （实现抖音App上下滑动）
深南大盗的博客
11-28 979
ViewPager2+Fragment+tablayout https://www.jianshu.com/p/351e695015d4 ViewPager2 是 ViewPager 库的改进版本，可提供增强型功能并解决使用 ViewPager 时遇到的一些问题 ViewPager有两个弊端：1.不能关闭预加载；2.更新adapter不生效 我们在加载数据的时候，viewpager默认会帮我们预加载前后两个页面的数据，并且这2个view是不可见的。而目前ViewPager2对Fragment支持只能
安卓：ViewPager+Fragment+RadioButton实现底部菜单栏滑动切换
01-03
ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左右滑动，从而切换不同的View，我们可以通过setPageTransformer()方法为我们的ViewPager> 设置切换时的动画效果。和ListView，...
高仿微信6.0主界面
02-01
高仿微信6.0主界面 1.使用viewpager+fragment 编写 主界面的 tab bar; 2.自定义 OverflowButton 修改button 图标； 3.修改 tab 图标颜色 切换； 4.解决内存 杀去导致 图标和view 不一致；
android 中viewpager+fragment仿微信底部TAG完美渐变
08-30
总结起来，实现“android 中viewpager+fragment仿微信底部TAG完美渐变”主要涉及以下知识点： 1. 使用ViewPager进行Fragment的切换。 2. 自定义ViewGroup（如LinearLayout）和自定义TextView子类...
viewpager实现画廊(一屏多个Fragment)效果
xidianhuihui的专栏
01-18 1675
转 本文主要介绍如何利用ViewPager实现Gallery的画廊效果，即一屏显示多个Fragment。具体代码可见ViewPager MultiFragmentDemo，示例APK地址TrineaAndroidDemo.apk(其中的ViewPager Multi Fragment Demo)。   效果图如下：              在使用Ga
第13天ViewPager案例2：Viewpager+Fragment实现微信底部导航（******）
qq_34178710的博客
12-18 1293
第15天ViewPager案例2：Viewpager+Fragment实现微信底部导航（******）ViewPager一.效果二.思路：1个ViewPager+4个Fragment+1个FragmentPagerAdapter四.代码 ViewPager 一.效果 1.点击底部，Viewpager切换 2.滑动ViewPager，底部也变化 3.Selector选择器的使用 二.思路：1个Vi...
一级变色导航
玉安_ZhangDe的博客
03-23 3万+
话不多说先看效果再上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt.
Bootstrap 导航条
soindy
03-23 8167
整理自慕课笔记导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。导航条和导航一样，在Bootstrap框架中是一个独立组件。在Boo
CSS3-综合案例2-五色导航
最新发布
weixin_54021642的博客
06-20 2万+
导航综合案例2
导航栏点击背景变色，点击另外一个之后这个背景色消失
lowers_sunshine的博客
06-15 1万+
$(document).ready(function(){      $(".dianji").each(function(){          //$(this).removeClass("hover");          $(this).click(function(){              $(".dianji").removeClass("bgcolor");
【资源分享】综合性的导航网站
cccccww的博客
06-09 7万+
网址导航，是一个集合较多网址，并按照一定条件进行分类的一种网址站，是互联网最早的网站形式之一。
切换导航
weixin_44548473的博客
05-16 5081
开发工具与关键技术：VS中切换导航 作者：木有窝的鸟~小通 撰写时间：2019年5月16日 在C#的语言中，我们学习了很多有关各种各样的小技巧，而每个小技巧都有它独特的魅力，不同的是它们可以紧密起来构成许许多多的功能。在项目中经常会出现很多问题，这时候就需要自个去探索解决方法，寻求解决的奥妙。 下面这个导航切换，其实也有很多来自其他人不同的看法，我觉得切换模块导航是一个重要的模块，做项目很多时候都...
一个不错的选色网站
热门推荐
weixin_33890526的博客
06-17 96万+
http://0to255.com/ 转载于:https://www.cnblogs.com/sofire/archive/2010/10/12/1849141.html
Android仿微信界面实现教程：ViewPager+FragmentPagerAdapter详解
本文将深入介绍如何通过利用ViewPager和FragmentPagerAdapter来构建一个仿微信主界面的流程。首先，我们通过以下步骤来实现这个功能： 1. **效果图预览** 在开始之前，开发者通常会提供一个实际效果的截图或者简单...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值