`

QQ上的tabhost效果

阅读更多
import android.app.Activity;
import android.os.Bundle;
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;

public class MainActivity extends Activity {

private RelativeLayout layout;

private RelativeLayout layout1;
private RelativeLayout layout2;
private RelativeLayout layout3;

private ImageView tab1;
private ImageView tab2;
private ImageView tab3;

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);

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);

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;
default:
break;
}

}

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;
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;
}
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;
}
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;
}
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);
}

}

};

}


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"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/default_bg"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="6.0"
>
<RelativeLayout
android:id="@+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_gravity="center_vertical"
>
<ImageView
android:id="@+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab1"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_gravity="center_vertical"
>
<ImageView
android:id="@+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab2"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_gravity="center_vertical"
>
<ImageView
android:id="@+id/tab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab3"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:background="#ffffff"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123456"
android:textColor="#000fff"
android:textSize="20dip"
android:layout_centerInParent="true"
android:layout_marginLeft="15dip"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
分享到:
评论

相关推荐

    androidTabhost界面切换

    在Android应用开发中,`TabHost` 是一个非常重要的组件,它用于实现多标签页的界面切换,类似于微信、QQ等应用的主界面布局。在本项目中,我们将深入探讨如何利用 `TabHost` 实现类似微信的界面切换效果。 首先,`...

    Android 应用常用的TabHost模版

    这种设计模式在许多流行的应用程序中,如微信、QQ等,都非常常见。下面将详细介绍TabHost的工作原理、使用方法以及如何创建一个基本的TabHost模版。 ### 1. TabHost概述 TabHost是Android SDK中的一个类,用于实现...

    高仿QQ2015,侧滑菜单栏+tabhost

    综上所述,"高仿QQ2015,侧滑菜单栏+tabhost"项目涵盖了Android开发的多个核心领域,包括界面设计、用户交互、动画效果、数据管理以及网络通信等,对于提升开发者全面的Android开发技能大有裨益。在"DefineQQ"这个...

    封装的一个tabHost框架

    在"封装的一个tabHost框架"中,开发者可能已经预定义了一些常见的选项卡样式和行为,例如选项卡的颜色、字体、过渡效果等,使得在实际项目中应用起来更加方便。此外,框架可能还提供了自定义选项卡外观和行为的方式...

    android QQ主页效果

    通过查看和学习这个示例代码,你可以更深入地理解如何在Android应用中实现滑动切换的TabHost效果。记住,实践是检验理解的最佳方式,尝试自己动手实现这样的功能,会加深你对Android UI组件的理解。

    在fragmentActivity下,Viewpager里嵌套使用gridview,同时结合tabhost

    在Android开发中,将`FragmentActivity`、`ViewPager`、`GridView`以及`TabHost`结合起来,可以构建出丰富的多视图切换应用界面。这种方式常用于实现内容分块且需要滑动浏览的效果,如电商应用的商品分类展示或者...

    Android底部导航菜单栏TabHost

    在本教程中,我们将深入探讨如何使用TabHost来构建一个类似于微信、QQ等主流应用的底部导航菜单栏,适合初学者学习。 首先,我们需要了解BottomNavigationView是Android Support Library中的一个组件,它是从...

    Fragment+FragmentTabHost仿QQ底部导航效果

    QQ人群里使用最多的手机APP之一,它的设计、排版都深受大众的喜爱,那么你想不想知道QQ的底部导航是如何实现的呢?其实很简单,通过Fragment+FragmentTabHost我们就可以轻松实现类似QQ底部导航的效果。

    android实现的QQ界面的例子

    在Android平台上,开发一款类似QQ的应用程序涉及到许多关键知识点,包括UI设计、用户交互、数据管理以及网络通信等。以下是对"android实现的QQ界面的例子"的详细解析: 1. **UI设计与布局**: - **TabHost**: ...

    FragmentTabHost(仿QQ界面)

    通过动态加载和管理这些`Fragment`,可以实现类似QQ那样流畅的标签切换效果。 总之,`FragmentTabHost`是Android开发中创建多标签界面的利器,结合`Fragment`的强大功能,可以构建出丰富的用户界面。通过合理的布局...

    FragmentTabHost仿QQ底部标签(有右上角数字)

    通过以上步骤,你就可以创建一个类似于QQ底部标签的导航栏,每个Tab上还能显示右上角的数字。在实际应用中,你需要根据需求动态地更新这些数字,例如当接收到新消息时。同时,你还可以自定义更多的样式和动画效果,...

    QQTab切换特效(源码)

    本源码实现的是QQ风格的Tab切换效果,它涉及到Android的自定义视图、动画处理以及事件监听等多个技术点。下面将详细讲解这个特效背后的原理和实现方法。 首先,Android中的Tab切换通常涉及到`TabHost`、`Fragment`...

    Fragment+FragmentTabHost实现仿新浪微博底部菜单栏效果(源码)

    - 图片资源,如效果图和QQ截图,显示了实际运行的应用界面。 - MyCustomTab02可能是自定义的Tab样式,可能是为了提供更个性化的菜单栏外观。 通过这种方式,我们可以创建一个具有类似新浪微博底部菜单栏的Android...

    仿AndroidQQ界面

    这个项目是基于AndroidQQ2012版本的界面进行模仿,主要采用了ViewPager和Fragment来替代传统的TabHost,以实现更加流畅、灵活的页面切换效果。 首先,我们来探讨`Fragment`这个概念。Fragment是Android 3.0(API...

    仿QQ的Tab显示的ImageButton

    另一种方法是使用动画,让栏目的打开和关闭过程更加生动,比如通过滑动动画来模拟QQ的Tab切换效果。 在具体实现过程中,我们需要做以下步骤: 1. 创建TabLayout并设置相关的Tab。 2. 将每个Tab关联到一个...

    android tablehost

    除了基本的`TabHost`使用,还可以通过自定义`TabSpec`和`Indicator`来实现更丰富的视觉效果,比如自定义标签样式、添加下划线等。此外,为了提供更好的用户体验,还可以考虑使用滑动切换标签页的方式,这通常需要...

    FragmentTabHost+Fragment实现底部导航栏,仿淘宝

    关于Fragment,它是Android 3.0引入的新特性,用于处理屏幕上的独立视图和逻辑。每个Fragment都有自己的生命周期和回调方法,如`onCreate()`, `onResume()`, `onPause()`等。在底部导航栏的场景下,每个Fragment代表...

    Android应用源码-系统工具类设计安卓源代码(82例).zip

    android tabhost --android UI源码 Android Txt文本阅读器源码 Android Widget快捷拨号程序源码 Android 仓库管理系统源码 Android 仿ES界面文件浏览器源码 Android 仿iPhoneQQ气泡聊天样式源码 Android 仿QQ多级...

    Andorid项目源码(各种项目、App资料等168套)

    仿ios音量调节的效果 仿iphone的listview下拉更新 仿iPhone风格对话框示例,Jar包及源码 仿lphone风格翻页控件,源码及Jar包 ...模仿QQ的扩展型很好的ExpandableListView 模拟立体翻转效果 等等168个资源

    android tab 切换 整理

    我们将讨论Tab布局的实现方式,包括使用TabHost、ViewPager和Android Design Support Library的TabLayout,以及如何添加动画效果。 1. TabHost: TabHost是Android早期版本中用于创建Tab布局的组件。它包含一个...

Global site tag (gtag.js) - Google Analytics