Android之界面切换并且图标显示状态效果实现

最新推荐文章于 2021-05-29 07:35:20 发布
最新推荐文章于 2021-05-29 07:35:20 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： Android开发 文章标签： Android 界面切换 显示状态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingdianlanxin/article/details/41910185
版权

现在的很多Android手机软件都是使用的类似于微信的架构，即左右滑动底部图标颜色和文字颜色随之改变。




下面我们来实现一下这个效果

首先，准备几个view界面

用于页卡切换的显示视图，这里，我简单地用了四种颜色区分不同的视图

view1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FF0000"
    android:orientation="vertical" >
</LinearLayout>

view2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#00FF00"
    android:orientation="vertical" >
</LinearLayout>

view3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#0000FF"
    android:orientation="vertical" >
</LinearLayout>

view4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FF00FF"
    android:orientation="vertical" >
</LinearLayout>


然后，在主界面中布局

activity_main.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainweixin"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#eee" >  

    <RelativeLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:background="@drawable/bottom_bar"
        >             
		
		<ImageView
        	android:id="@+id/img_tab_now"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"        	     	
        	android:scaleType="matrix"
        	android:layout_gravity="bottom"            	
            android:layout_alignParentBottom="true"
        	android:src="@drawable/tab_bg" />
        
		<LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingBottom="2dp"            
        	>
        	
            <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_weixin"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_weixin_pressed" />
                <TextView
                    android:id="@+id/tv_weixin"
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="微信"
            		android:textColor="#0f0"
            		android:textSize="12sp" />
        	 </LinearLayout>
        	 <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_address"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_address_normal" />
                <TextView
                    android:id="@+id/tv_address"
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="通讯录"
            		android:textColor="#fff"
            		android:textSize="12sp" />                
        	 </LinearLayout>
        	 <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_friends"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_find_frd_normal" />
                <TextView
                    android:id="@+id/tv_friends"
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="朋友们"
            		android:textColor="#fff"
            		android:textSize="12sp" />                
        	 </LinearLayout>
        	 
        	 <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_settings"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_settings_normal" />
                <TextView
                    android:id="@+id/tv_settings"
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="设置"
            		android:textColor="#fff"
            		android:textSize="12sp" />
        	 </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
    
    <LinearLayout
        android:layout_width="fill_parent"
    	android:layout_height="wrap_content" 
    	android:layout_alignParentTop="true"
    	android:layout_above="@id/main_bottom"       
        android:orientation="vertical" >
        
        <android.support.v4.view.ViewPager
        	android:id="@+id/tabpager"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_gravity="center" > 
        </android.support.v4.view.ViewPager>  
    </LinearLayout>

</RelativeLayout>

最后，在程序中实现功能 
package com.tabicondemo;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity 
{
	private ViewPager mTabPager;	
	private ImageView mTabImg;// 动画图片
	private ImageView mTab1,mTab2,mTab3,mTab4;
	private TextView mText1,mText2,mText3,mText4;
	private int zero = 0;// 动画图片偏移量
	private int currIndex = 0;// 当前页卡编号
	private int one;//单个水平动画位移
	private int two;
	private int three;
	
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         //启动activity时不自动弹出软键盘
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
        
        mTabPager = (ViewPager)findViewById(R.id.tabpager);
        mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());
        
        mText1 = (TextView) findViewById(R.id.tv_weixin);
        mText2 = (TextView) findViewById(R.id.tv_address);
        mText3 = (TextView) findViewById(R.id.tv_friends);
        mText4 = (TextView) findViewById(R.id.tv_settings);
        mTab1 = (ImageView) findViewById(R.id.img_weixin);
        mTab2 = (ImageView) findViewById(R.id.img_address);
        mTab3 = (ImageView) findViewById(R.id.img_friends);
        mTab4 = (ImageView) findViewById(R.id.img_settings);
        mTabImg = (ImageView) findViewById(R.id.img_tab_now);
        mTab1.setOnClickListener(new MyOnClickListener(0));
        mTab2.setOnClickListener(new MyOnClickListener(1));
        mTab3.setOnClickListener(new MyOnClickListener(2));
        mTab4.setOnClickListener(new MyOnClickListener(3));
        Display currDisplay = getWindowManager().getDefaultDisplay();//获取屏幕当前分辨率
        int displayWidth = currDisplay.getWidth();
        int displayHeight = currDisplay.getHeight();
        one = displayWidth/4; //设置水平动画平移大小
        two = one*2;
        three = one*3;
        Log.i("info", "获取的屏幕分辨率为" + one + two + three + "X" + displayHeight);
        
      //将要分页显示的View装入数组中
        LayoutInflater mLi = LayoutInflater.from(this);
        View view1 = mLi.inflate(R.layout.view1, null);
        View view2 = mLi.inflate(R.layout.view2, null);
        View view3 = mLi.inflate(R.layout.view3, null);
        View view4 = mLi.inflate(R.layout.view4, null);
        
      //每个页面的view数据
        final ArrayList<View> views = new ArrayList<View>();
        views.add(view1);
        views.add(view2);
        views.add(view3);
        views.add(view4);
      //填充ViewPager的数据适配器
        PagerAdapter mPagerAdapter = new PagerAdapter() 
        {
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) 
			{
				return arg0 == arg1;
			}
			
			@Override
			public int getCount() {
				return views.size();
			}

			@Override
			public void destroyItem(View container, int position, Object object) 
			{
				((ViewPager)container).removeView(views.get(position));
			}
			
			@Override
			public Object instantiateItem(View container, int position) 
			{
				((ViewPager)container).addView(views.get(position));
				return views.get(position);
			}
		};
		
		mTabPager.setAdapter(mPagerAdapter);
    }
    
    //头标点击监听
	public class MyOnClickListener implements View.OnClickListener 
	{
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}
		@Override
		public void onClick(View v) {
			mTabPager.setCurrentItem(index);
		}
	};
    
	//页卡切换监听
	public class MyOnPageChangeListener implements OnPageChangeListener 
	{
		@Override
		public void onPageSelected(int arg0) 
		{
			Animation animation = null;
			switch (arg0) {
			case 0:
				mText1.setTextColor(Color.GREEN);
				mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_pressed));
				if (currIndex == 1) {
					mText2.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(one, 0, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));
				} else if (currIndex == 2) {
					mText3.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(two, 0, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));
				}
				else if (currIndex == 3) {
					mText4.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(three, 0, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));
				}
				break;
			case 1:
				mText2.setTextColor(Color.GREEN);
				mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_pressed));
				if (currIndex == 0) {
					mText1.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(zero, one, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));
				} else if (currIndex == 2) {
					mText3.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(two, one, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));
				}
				else if (currIndex == 3) {
					mText4.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(three, one, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));
				}
				break;
			case 2:
				mText3.setTextColor(Color.GREEN);
				mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_pressed));
				if (currIndex == 0) {
					mText1.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(zero, two, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));
				} else if (currIndex == 1) {
					mText2.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(one, two, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));
				}
				else if (currIndex == 3) {
					mText4.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(three, two, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));
				}
				break;
			case 3:
				mText4.setTextColor(Color.GREEN);
				mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_pressed));
				if (currIndex == 0) {
					mText1.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(zero, three, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));
				} else if (currIndex == 1) {
					mText2.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(one, three, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));
				}
				else if (currIndex == 2) {
					mText3.setTextColor(Color.WHITE);
					animation = new TranslateAnimation(two, three, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));
				}
				break;
			}
			currIndex = arg0;
			animation.setFillAfter(true);// True:图片停在动画结束位置
			animation.setDuration(150);
			mTabImg.startAnimation(animation);
		}
		
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) 
		{
		}

		@Override
		public void onPageScrollStateChanged(int arg0) 
		{
		}
	}
}

效果如图

   


源码下载


冰点蓝欣
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TabLayout和Fragment实现点击和滑动切换
qq_35820350的博客
09-06 4437
先上效果图： 先看布局文件： &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_hei...
Android中利用ListView和GridView实现列表视图和网格(图标)视图的相互切换显示
01-11
Android中利用ListView和GridView实现列表视图和网格(图标)视图的相互切换显示
教你一步一步实现图标无缝变形切换
huachao1001的专栏
06-20 8948
在上一篇文章[《酷炫的Activity切换动画，打造更好的用户体验 》](http://blog.csdn.net/huachao1001/article/details/51659963)中，我们感受到了过渡切换动画带来的不一样的用户体验。如何你还意犹未尽，那么今天我们再体验一把图标切换动画。先来个效果图，让你更有动力往下看(PS:以下gif是放慢了的动画，另外gif丢帧导致不流畅，各位不要觉得很卡哈~)
android 的tab切换效果,Android中TabLayout结合ViewPager实现页面切换效果
weixin_39953578的博客
05-27 387
先看看效果，如图：1.因为TabLayout是Android Design Support Library官方库的一个控件，所以使用TabLayout时候需要先添加对该库的依赖compile 'com.android.support:design:22.2.0'2.下面是TabLayout和ViewPager配合使用的布局xmlns:app="http://schemas.android.com/...
TabLayout实现标签切换
HJ_CQ的博客
06-18 1695
通常我们有这样一个需求，需要实现多个标签的切换，实现指示器背景色的改变，可以使用系统提供的TabLayout来实现。 一、首先我们在xml定义一个tablayout文件 <android.support.design.widget.TabLayout android:id="@+id/tabLayout" ...
Android实现简单底部导航栏 Android仿微信滑动切换效果
08-29
Android 实现简单底部导航栏 Android 仿微信滑动切换...本篇文章详细介绍了 Android 实现简单底部导航栏 Android 仿微信滑动切换效果的实现方法，并且提供了相关的知识点，希望能够帮助读者更好地理解 Android 开发。
Android开发中实现应用的前后台切换效果
09-02
在Android开发中，实现应用的前后台切换效果是提升用户体验的关键环节。这涉及到对Activity和Task的理解以及如何监听程序状态的变化。首先，Activity是Android应用的基本单元，它代表了用户界面上的一个屏幕，用户...
Android实现微信首页左右滑动切换效果
09-01
在Android开发中，微信首页的左右滑动切换效果是一个常见的用户界面交互，它提升了应用的用户体验，使得用户能够更流畅地在不同的功能模块之间切换。本文将详细介绍如何在Android平台上实现这种效果，主要包括使用...
Android使用(TabLayout)与(FragmentTabHost)实现底部状态栏切换
09-26
本文将深入讲解如何利用这两个组件，以及与ViewPager和Fragment的配合，来实现底部状态栏的切换。 **TabLayout与ViewPager的结合** TabLayout是Google提供的Material Design组件之一，它为应用程序提供了一个可...
安卓ListView选中状态
03-11
安卓ListView选中之后添加一个背景颜色……
Android代码-让任何布局支持选中状态，类似 Checkbox 的属性
08-06
Android - CompoundLayout It's an Android library that allows you to use Layout as RadioButton or CheckBox. The librarie is Android 14 compatible. Gradient effect is only Android 21 compatible. The demo below is inspired by Cris Samson's gradient hover animation. Installation Gradle repositories { maven { url "https://jitpack.io" } } compile 'com.github.jaouan:compoundlayout:1.0.1' Usage General CompoundLayout checked state can be changed programmatically using method myCompoundLayout.s
点击导航栏切换页面的几种方式
热门推荐
zsr0526的博客
03-22 5万+
1.RedioGroup+Fragment(推荐) 2.底部线性布局+帧布局(放fragment) 3.RedioGroup+Viewpager
android tab 点击,TabLayout.Tab点击事件
weixin_34675395的博客
05-26 1019
1,大家都知道 android.support.design.widget.TabLayout 中的TabLayout并没有点击事件 只有addOnTabSelectedListener这个选中监听,今天遇到个问题,就是和照片墙组合使用,点击tab照片墙要滑动到相应的位置,滑动照片墙 要选中相应的tab ,用addOnTabSelectedListener这个监听的话 两边互相影响,就出问题了 ,...
android点击界面显示导航栏,Android之新闻客服端顶部导航栏Tab点击和左右滑动实现切换界面...
weixin_35385921的博客
05-26 720
APP市场中大多数新闻App都有导航菜单，导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面，今日头条，网易新闻等。随着版本迭代的更新，带来了许多控件，案例主要用到了TabLayout，ViewPage，RecyclerView，CardView等新控件。效果如图： 以前的实现方法是 ：ViewPagerIndicator + Fragm...
android 点击切换图标,Android导航抽屉切换图标向右
weixin_30444625的博客
05-29 183
我为EndDrawerToggle该类编写了一个与您的设置非常相似的设置- DrawerLayout带末端对齐的抽屉View，AppCompatActivity带有自定义Toolbar的支持ActionBar。import android.app.Activity;import android.support.v4.view.GravityCompat;import android.support...
Android 切换按钮实现TabLayout
weixin_39165470的博客
05-06 521
实现如下样式切换 1、布局文件 <com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="40dp" android:layout_marginSt...
Android开发之TabLayout真正实现底部导航栏(可实现点击文字颜色图片切换)
等待着冬天的风的博客
01-08 2872
前言：关于这个TabLayout实现底部导航，在我的上篇《Android开发之TabLayout实现底部导航栏》博客中有提到，但是后面在仔细的接触项目中，发现了里面有很多没有解决的事情，比如不能实现点击文字颜色和图片的切换，不能做到禁止左右滑动，所以趁着今天有时间的情况下，把这几个功能好好的完善一下！ ----效果图---- ----分析---- 分析：通过上篇博客中我们可以知道，图
安卓Tablayout的使用，手把手教你如何打造滑动切换界面
ghdmao的博客
07-30 4095
tablayout是一个很好用的控件，我平时的使用习惯是将fragment与tablayout合并使用，在首页的fragment里嵌入tablayout，达到一种界面紧凑的效果，下面先上图： 是不是感觉很单一？今天只是简单的操作，后期大家可以往里面添加属性，首先，我们要用这个tablayout的话，先要导入design依赖库，然后在布局文件里操作： LinearLayout xmlns:a
Android实现微信键盘切换效果
"Android仿微信键盘切换效果 - 实现录音、表情、文字和其他功能间的平滑切换，解决键盘切换时屏幕晃动及键盘自动隐藏问题。" 在Android开发中，尤其是在构建即时通讯（IM）应用或者类似微信的朋友圈功能时，键盘的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值