高仿QQ首页消息和电话切换的实现

因为之前项目中有用到类似的效果。自己就整理了一下。大致就只用了两种，简单介绍下，顺便分享给有需要的朋友。愿做这行的人少走一些弯路。哈哈，不说了废话了。先看看效果图片吧！等等介绍实现方法。

首先介绍第一种：

 一、使用通过设置选择属性实现

布局代码如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/title_bg"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp" >


        <Button
            android:id="@+id/btn_head_a"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:background="@drawable/house_rent_selected"
            android:text="消息"
            android:padding="3dp"
            android:textColor="@drawable/tv_touch_color"
            android:textSize="15sp" />


        <Button
            android:id="@+id/btn_head_b"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:background="@drawable/house_sell_selected"
            android:textColor="@drawable/tv_touch_color"
            android:padding="3dp"
            android:text="电话"
            android:textSize="15sp" />
    </LinearLayout>

代码如下：

// 方法1
btn_head_a = (Button) findViewById(R.id.btn_head_a);
btn_head_b = (Button) findViewById(R.id.btn_head_b);
btn_head_a.setSelected(true);// 设置属性Selected为true
btn_head_a.setOnClickListener(this);
btn_head_b.setOnClickListener(this);

然后做监听事件就可以了

二、使用通过设置布局显隐性实现

布局代码如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/title_bg"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp" >


        <TextView
            android:id="@+id/tv_head_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/house_rent"
            android:text="消息"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:textColor="@color/title_bg"
            android:textSize="15sp" />
        <TextView
            android:id="@+id/tv_head_c"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/house_rent_selected"
            android:text="消息"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:textColor="@drawable/tv_touch_color"
            android:textSize="15sp"
            android:visibility="gone" />


        <TextView
            android:id="@+id/tv_head_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/house_sell_selected"
            android:textColor="@drawable/tv_touch_color"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:text="电话"
            android:textSize="15sp" />
        
        <TextView
            android:id="@+id/tv_head_d"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/house_sell"
            android:text="电话"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:textColor="@color/title_bg"
            android:textSize="15sp"
            android:visibility="gone"  />
    </LinearLayout>

代码实现如下： 即在监听事件做控件显隐性

case R.id.tv_head_a:

case R.id.tv_head_c:
tv_head_a.setVisibility(View.VISIBLE);
tv_head_b.setVisibility(View.VISIBLE);
tv_head_c.setVisibility(View.GONE);
tv_head_d.setVisibility(View.GONE);
break;


case R.id.tv_head_b:
case R.id.tv_head_d:
tv_head_a.setVisibility(View.GONE);
tv_head_b.setVisibility(View.GONE);
tv_head_c.setVisibility(View.VISIBLE);
tv_head_d.setVisibility(View.VISIBLE);
break;

好了。就简单介绍到这里。如果大家有什么好的意见或者方法可以评论并且共享你的方法。谢谢！

下面提供实现的 demo 有需要的可以自己下载。下载地址