仿qq顶部栏tab选项卡切换效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bryant_liu24/article/details/51576403


如图,是实现当前tab页的效果,点击的时候两边切换,实现的效果和qq页面的消息电话顶部栏是一样的.。

首先看一下布局文件R.layout.activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:clipToPadding="false"
    android:fitsSystemWindows="true"
    android:orientation="vertical" >


    <RelativeLayout
        android:id="@+id/rl_header"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="@color/tab" >


        <ImageView
            android:id="@+id/iv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="6dp"
            android:padding="12dp"
            android:src="@drawable/arrow_left" />


        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="6dp"
            android:padding="8dp" />


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_centerVertical="true"
            android:paddingLeft="8.0dp" >


            <Button
                android:id="@+id/btn_message"
                android:layout_width="90dip"
                android:layout_height="25dip"
                android:background="@drawable/left_bold"
                android:gravity="center"
                android:padding="2dp"
                android:text="所有订单"
                android:textColor="@color/tab"
                android:textSize="14sp" />


            <Button
                android:id="@+id/btn_call"
                android:layout_width="90dip"
                android:layout_height="25dip"
                android:background="@drawable/right_transparent"
                android:gravity="center"
                android:padding="2dp"
                android:text="维权订单"
                android:textColor="#ffffff"
                android:textSize="14sp" />
        </LinearLayout>
    </RelativeLayout>


    <LinearLayout
        android:id="@+id/ll_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:layout_marginTop="6dp"
        android:background="@drawable/order_search_border"
        android:orientation="horizontal" >


        <ImageView
            android:id="@+id/et_phoneNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="8dp"
            android:src="@drawable/order_search_icon" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginLeft="12dp"
            android:background="@null"
            android:gravity="center"
            android:hint="通过手机号、订单号、收件人姓名搜索"
            android:singleLine="true"
            android:textColor="@color/black"
            android:textSize="12sp" />
    </LinearLayout>


    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="6dp" />


</LinearLayout>

再来看一下怎样实现选项卡切换的效果,这里通过找到两个fragment的标记位flag然后切换选项卡的时候,替换fragment,并改变两边选项卡内容的样式,从而实现两边切换的动态效果,代码如下:

package com.example.switchtabdemo;


import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;


public class MainActivity extends FragmentActivity {
private static final String TAG = "MainActivity";
private FragmentManager fm;
private Button btn_message, btn_call;
private OrderAllFragment messageFragment;
private OrderProtectFragment callFragment;
public static final int MESSAGE_FRAGMENT_TYPE = 1;
public static final int CALL_FRAGMENT_TYPE = 2;
public int currentFragmentType = -1;


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
}


private void initData() {
fm = getSupportFragmentManager();
ImageView iv_left = (ImageView) findViewById(R.id.iv_left);
TextView tv_right = (TextView) findViewById(R.id.tv_right);
LinearLayout ll_search = (LinearLayout) findViewById(R.id.ll_search);
btn_message = (Button) findViewById(R.id.btn_message);
btn_call = (Button) findViewById(R.id.btn_call);
btn_message.setOnClickListener(onClicker);
btn_call.setOnClickListener(onClicker);
ll_search.setOnClickListener(onClicker);
iv_left.setOnClickListener(onClicker);
tv_right.setOnClickListener(onClicker);
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
Fragment mainFragment = fragmentManager.findFragmentByTag("message");
if (mainFragment != null) {
transaction.replace(R.id.fl_content, mainFragment);
transaction.commit();
} else {
loadFragment(MESSAGE_FRAGMENT_TYPE);
}
}


private void switchFragment(int type) {
switch (type) {
case MESSAGE_FRAGMENT_TYPE:
loadFragment(MESSAGE_FRAGMENT_TYPE);
break;
case CALL_FRAGMENT_TYPE:
loadFragment(CALL_FRAGMENT_TYPE);
break;
}


}


private void loadFragment(int type) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
if (type == CALL_FRAGMENT_TYPE) {
if (callFragment == null) {
callFragment = new OrderProtectFragment();


transaction.add(R.id.fl_content, callFragment, "zhishi");
} else {
transaction.show(callFragment);
}
if (messageFragment != null) {
transaction.hide(messageFragment);
}
currentFragmentType = MESSAGE_FRAGMENT_TYPE;
} else {
if (messageFragment == null) {
messageFragment = new OrderAllFragment();
transaction.add(R.id.fl_content, messageFragment, "wenda");
} else {
transaction.show(messageFragment);
}
if (callFragment != null) {
transaction.hide(callFragment);
}
currentFragmentType = CALL_FRAGMENT_TYPE;
}
transaction.commitAllowingStateLoss();
}


// private void setStatusBarColor() {
// Window window = getWindow();
// WindowManager.LayoutParams params = getWindow().getAttributes();
// params.flags |= WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
// window.setAttributes(params);
// SystemBarTintManager tintManager = new SystemBarTintManager(this);
// tintManager.setStatusBarTintEnabled(true);
// tintManager.setTintColor(getResources().getColor(R.color.tab));
// }


private OnClickListener onClicker = new OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_message:
btn_message.setTextColor(getResources().getColor(R.color.tab));
btn_call.setTextColor(Color.WHITE);
btn_message.setBackgroundResource(R.drawable.left_bold);
btn_call.setBackgroundResource(R.drawable.right_transparent);
switchFragment(MESSAGE_FRAGMENT_TYPE);


break;
case R.id.btn_call:
btn_message.setTextColor(Color.WHITE);
btn_call.setTextColor(getResources().getColor(R.color.tab));
btn_message.setBackgroundResource(R.drawable.left_transparent);
btn_call.setBackgroundResource(R.drawable.right_bold);
switchFragment(CALL_FRAGMENT_TYPE);
break;
case R.id.iv_left:
finish();
break;
case R.id.ll_search:
// startActivity(new Intent(getApplicationContext(),
// SearchOrderActivity.class));
break;
}
}
};


}


最后看一下完整的代码,实现起来是不是很简单呢!

点击打开链接

阅读更多

没有更多推荐了,返回首页