Android仿QQ滑动类Tab 和 底部TabHost 的讲解

最新推荐文章于 2021-01-22 17:18:45 发布
最新推荐文章于 2021-01-22 17:18:45 发布
阅读量1.7k 收藏
点赞数
分类专栏： 【Android UI 样式】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niejing654092427/article/details/8255640
版权

效果图:

 

MainActivity.java

package com.android.qq.activity;

import android.app.ActivityGroup;
import android.content.ComponentName;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends ActivityGroup {

	private RelativeLayout layout;
	
	private RelativeLayout layout1;
	private RelativeLayout layout2;
	private RelativeLayout layout3;
	private RelativeLayout layout4;
	
	private RelativeLayout bodylayout;
	
	private ImageView tab1;
	private ImageView tab2;
	private ImageView tab3;
	private ImageView tab4;
	
	private ImageView first;
	private int current = 1; //默认选中第一个，可以动态的改变此参数值
	
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		initUI();
	}
	
	private void initUI(){
		layout = (RelativeLayout) findViewById(R.id.root);
		
		layout1 = (RelativeLayout) findViewById(R.id.layout1);
		layout2 = (RelativeLayout) findViewById(R.id.layout2);
		layout3 = (RelativeLayout) findViewById(R.id.layout3);
		bodylayout = (RelativeLayout) findViewById(R.id.bodylayout);
		
		tab1 = (ImageView) findViewById(R.id.tab1);
		tab1.setOnClickListener(onClickListener);
		tab2 = (ImageView) findViewById(R.id.tab2);
		tab2.setOnClickListener(onClickListener);
		tab3 = (ImageView) findViewById(R.id.tab3);
		tab3.setOnClickListener(onClickListener);
		tab4 = (ImageView) findViewById(R.id.tab4);
		tab4.setOnClickListener(onClickListener);
		
		RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
		first = new ImageView(this);
		first.setTag("first");
		first.setImageResource(R.drawable.topbar_select);
		
		// 默认选中项
		switch (current) {
		case 1:
			layout1.addView(first, rl);
			current = R.id.tab1;
			break;
		case 2:
			layout2.addView(first, rl);
			current = R.id.tab2;
			break;
		case 3:
			layout3.addView(first, rl);
			current = R.id.tab3;
			break;
		case 4:
			layout4.addView(first, rl);
			current = R.id.tab4;
			break;
		default:
			break;
		}
		View view = getLocalActivityManager().startActivity("index",
				new Intent(MainActivity.this, Tab1.class))
				.getDecorView();
		bodylayout.addView(view);
		
	}

	private boolean isAdd = false; // 是否添加过 top_select
	private int select_width; // top_select_width
	private int select_height; // top_select_height
	private int firstLeft; // 第一次添加后的左边距*****
	private int startLeft; // 起始左边距
	
	// 添加一个view，移除一个view
	private void replace() {
		switch (current) {
		case R.id.tab1:
			changeTop(layout1);
			break;
		case R.id.tab2:
			changeTop(layout2);
			break;
		case R.id.tab3:
			changeTop(layout3);
			break;
		case R.id.tab4:
			changeTop(layout4);
			break;
		default:
			break;
		}
	}
	
	private void changeTop(RelativeLayout relativeLayout){
		ImageView old = (ImageView) relativeLayout.findViewWithTag("first");;
		select_width = old.getWidth();
		select_height = old.getHeight();
		
		RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height);
		rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();
		rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop();
		
		// 获取起始位置
		firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();
		
		ImageView iv = new ImageView(this);
		iv.setTag("move");
		iv.setImageResource(R.drawable.topbar_select);
		
		layout.addView(iv , rl);
		relativeLayout.removeView(old);
	}
	
	private OnClickListener onClickListener = new OnClickListener(){
		public void onClick(View v) {
			if(!isAdd){
				replace(); // 初次使用移除old 添加新的top_select为RelativeLayout所使用
				isAdd = true;
			}
			
			ImageView top_select = (ImageView) layout.findViewWithTag("move");
			int tabLeft;
			int endLeft = 0;
			
			boolean run = false;

			switch (v.getId()) {
			case R.id.tab1:
				if (current != R.id.tab1) {
					// 中心位置
					tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2;
					// 最终位置
					endLeft = tabLeft - select_width / 2;
					current = R.id.tab1;
					run = true;
					bodylayout.removeAllViews();
					View view = getLocalActivityManager().startActivity("index",
							new Intent(MainActivity.this, Tab1.class))
							.getDecorView();
					bodylayout.addView(view);
				}
				break;
			case R.id.tab2:
				if (current != R.id.tab2) {
					tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2;
					endLeft = tabLeft - select_width / 2;
					current = R.id.tab2;
					run = true;
					bodylayout.removeAllViews();
					View view = getLocalActivityManager().startActivity("index",
							new Intent(MainActivity.this, Tab2.class))
							.getDecorView();
					bodylayout.addView(view);
				}
				break;
			case R.id.tab3:
				if (current != R.id.tab3) {
					tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2;
					endLeft = tabLeft - select_width/2;
					current = R.id.tab3;
					run = true;
					bodylayout.removeAllViews();
					View view = getLocalActivityManager().startActivity("index",
							new Intent(MainActivity.this, Tab3.class))
							.getDecorView();
					bodylayout.addView(view);
				}
				break;
			case R.id.tab4:
				if (current != R.id.tab4) {
					tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab4.getLeft() + tab4.getWidth() / 2;
					endLeft = tabLeft - select_width/2;
					current = R.id.tab4;
					run = true;
					bodylayout.removeAllViews();
					View view = getLocalActivityManager().startActivity("index",
							new Intent(MainActivity.this, Tab4.class))
							.getDecorView();
					bodylayout.addView(view);
				}
				break;
			default:
				break;
			}
			
			if(run){
				TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);
				startLeft = endLeft - firstLeft; // 重新设定起始位置
				animation.setDuration(400);
				animation.setFillAfter(true);
				top_select.bringToFront();
				top_select.startAnimation(animation);
			}
			
		}

	};
	
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);

        // This is our one standard application action -- inserting a
        // new note into the list.
        menu.add(0, 0, 0, R.string.app_name)
                .setShortcut('4', 'a')
                .setIcon(android.R.drawable.ic_menu_add);

        // Generate any additional actions that can be performed on the
        // overall list.  In a normal install, there are no additional
        // actions found here, but this allows other applications to extend
        // our menu with their own actions.
        Intent intent = new Intent(null, getIntent().getData());
        intent.addCategory(Intent.CATEGORY_ALTERNATIVE);
        menu.addIntentOptions(Menu.CATEGORY_ALTERNATIVE, 0, 0,
                new ComponentName(this, MainActivity.class), null, intent, 0, null);

        return true;
    }

}


 

 

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@drawable/default_bg">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="6.0"
            android:orientation="horizontal" >

            <RelativeLayout
                android:id="@+id/layout1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/tab1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@drawable/icon_img1_nor" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/layout2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/tab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@drawable/icon_img2_nor" />
            </RelativeLayout>
            
            <RelativeLayout
                android:id="@+id/layout3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/tab3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@drawable/icon_img3_nor" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/layout4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1.0" >

                <ImageView
                    android:id="@+id/tab4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@drawable/icon_img3_nor" />
            </RelativeLayout>
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/bodylayout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:background="#ffffff"
            android:gravity="center"
            android:orientation="horizontal" >
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>


 

 

Tab1.java

package com.android.qq.activity;


import android.app.Activity;
import android.content.ComponentName;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;


public class Tab1 extends Activity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tab1);
	}
}


 

tab1.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" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/a1" >
    </ImageView>

</LinearLayout>


 

 

资源下载地址: http://download.csdn.net/detail/niejing654092427/4844539

 

 

 

效果图:

 

资源下载地址: http://download.csdn.net/detail/niejing654092427/4844574

 

 

 

 

jingle_nie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android高仿qq底部Tab
12-04
Android高仿qq底部Tab栏！
模仿QQ动态特效的tab实现
11-14
模仿QQ动态特效的tab实现。模仿QQ动态特效的tab实现
android-仿QQtab
weixin_33763244的博客
09-10 105
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout_width="fill_parent
Android自定义view仿QQ的Tab按钮动效
w_1220577523的博客
01-22 2226
话不多说 先上效果图 实现其实很简单，先用两张图 一张是背景的图，一张是笑脸的图片，笑脸的图片是白色，可能看不出来。实现思路：主要是再触摸view的时候同时移动这两个图片，但是移动的距离不一样，造成的错位感，代码很简单： import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import androi
UI开发第六篇——仿QQ的滑动Tab
shinfocom
10-26 129
代码下载地址：http://www.devdiv.com/thread-101454-1-1.html 使用了ActivityGroup。 public class MainActivity extends ActivityGroup { private RelativeLayout layout; private RelativeLayout layout1; ...
Android应用经典主界面框架之一:仿QQ
03-03
今天记录第一种方式，即主界面下面有几个tab页，最上端是标题栏，tab页和tab页之间不是通过滑动切换的，而是通过点击切换tab页。早期这种架构一直是使用tabhost+activitygroup来使用，随着fragment的出现及google...
Android底部导航菜单栏TabHost
09-15
在本教程中，我们将深入探讨如何使用TabHost来构建一个类似于微信、QQ等主流应用的底部导航菜单栏，适合初学者学习。 首先，我们需要了解BottomNavigationView是Android Support Library中的一个组件，它是从...
仿QQ的Tab显示的ImageButton
09-06
这个场景中，"仿QQ的Tab显示的ImageButton"是一个典型的实现方式，它结合了图像按钮（ImageButton）和Tab栏的功能，使得用户可以通过点击图片按钮来切换不同的页面或开启/关闭特定功能。下面我们将深入探讨这个知识...
Android头部可滑动导航
06-24
在Android中，Tab布局常通过TabHost、ViewPager或底部导航栏（BottomNavigationView）等组件来实现。在这里，我们主要关注的是ViewPager，因为它可以实现平滑的左右滑动效果，非常适合用于头部滑动导航。 1. **...
仿qqTab左右切换选项卡
06-03
仿qqtab选项卡
Android滑动切换tab（切换带动画）
04-08
Android滑动切换tab（切换带动画）
Android中实现可滑动的Tab的3种方式
01-05
1. 第一种，使用 TabHost + ViewPager 实现该方法会有一个Bug，当设置tabHost.setCurrentTab()为0时，ViewPager不显示（准确的说是加载），只有点击其他任意一个tab后才会加载。 有解的同学吼一声~~~~~~~ Activity: 代码如下:package com.swordy.demo.android.fragment; import java.util.Random; import android.os.Bundle;import android.support.v4.app.Fragment;import android.support
tab页滑动实现
09-13
PagerSlidingTab抽取出来的 类，实现tab的滑动
仿微信QQTab界面，可点击可滑动
10-26
开发工具为eclipse，代码已经经过测试，可以运行，直接可以导入测试学习，简单，适合新手学习！
android仿qq、微信左滑删除listview（不使用外部插件完成）
07-30
没有用插件实现的左滑出现红色删除键的列表，可定义多个按钮
使用FragmentTabHost实现仿QQ的切换，并在里面嵌套TabLayout+ViewPager的滑动切换
qq_34949557的博客
03-05 435
本篇文章要实现的功能是在界面的底部放置一个FragmentTabHost实现类似QQ底部切换栏的功能，切换的内容用Fragment填充，然后再Fragment的里面再放入TabLayout和ViewPager，实现滑动切换的效果。 这里只需要一个Activity，我就放在MainActivity里面，直接上布局代码 <LinearLayout android:orientati
android4.0 FragmentTabHost tabs在底部 仿qq界面
duandonghui的博客
07-12 312
首先吐槽下官网，http://developer.android.com/reference/android/support/v4/app/FragmentTabHost.html ，这里居然没给出xml的配置，导致一直弄了很久。而百度搜索到的大部分都是这个配置，不只是否是版本升级的原因，我按照这个配置，运行就会报错：java.lang.RuntimeException: Your TabHost
利用tabhost实现类似QQ、微信界面
码农笔记
01-15 1159
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TabHost android:layout_width="match
android仿携程客户端界面实现
10-13
android仿携程客户端界面实现。
Android应用主界面设计：仿QQTab切换实现
该资源是一篇关于Android应用开发的文章，主要讨论了如何构建一个类似QQ的经典主界面框架，其中涉及到的交互方式是底部有多个tab页，通过点击切换，上方有标题栏。文章提到了早期使用tabhost+activitygroup的方法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值