Android自定義選項(xiàng)卡切換效果

更新時(shí)間：2021年06月15日 14:20:28 作者：偶是老李頭

這篇文章主要為大家詳細(xì)介紹了Android自定義選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義選項(xiàng)卡切換效果的具體代碼，供大家參考，具體內(nèi)容如下

一、實(shí)際使用的效果

二、自定義可切換的標(biāo)題欄

1、布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="232dp"
    android:layout_height="32dp"
    android:background="@drawable/leave_back_tab_bg_selector"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/tvLeaveNum"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/leave_back_button_bg_selector"
        android:gravity="center"
        android:layout_weight="1"
        android:textColor="@color/white"
        android:textSize="14sp"
        android:clickable="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:text="@string/leave_crews_num"/>

    <TextView
        android:id="@+id/tvBackNum"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/leave_back_button_bg_selector"
        android:gravity="center"
        android:layout_weight="1"
        android:textColor="@color/white"
        android:textSize="14sp"
        android:clickable="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:text="@string/back_crews_num"/>
</LinearLayout>

leave_back_button_bg_selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#328BDD" />
            <corners android:radius="3dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</selector>

leave_back_button_bg_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#328BDD" />
            <corners android:radius="3dp" />
            <solid android:color="#328BDD" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="@color/transparent" />
            <corners android:radius="3dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</selector>

2、控件封裝

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnFocusChange;

public class LeaveBackTitleTabView extends LinearLayout {

    public final static int INDEX_LEAVE = 1;
    public final static int INDEX_BACK = 2;

    @BindView(R.id.tvBackNum)
    TextView tvBackNum;
    @BindView(R.id.tvLeaveNum)
    TextView tvLeaveNum;
    private Context mContext;

    private ITabChangeListener tabChangeListener;

    public void setTabChangeListener(ITabChangeListener tabChangeListener) {
        this.tabChangeListener = tabChangeListener;
    }

    public LeaveBackTitleTabView(Context context) {
        super(context);
        mContext = context;
    }

    public LeaveBackTitleTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        View view = (View) LayoutInflater.from(context).inflate(R.layout.view_leave_back_list_tab, this, true);
        ButterKnife.bind(view);
    }

    @OnFocusChange({R.id.tvLeaveNum,R.id.tvBackNum})
    public void doFocusChanged(View view){
        switch(view.getId()){
            case R.id.tvLeaveNum :
                if(tabChangeListener != null){
                    tabChangeListener.onTabChanged(INDEX_LEAVE);
                }
                break;
            case R.id.tvBackNum:
                if(tabChangeListener != null){
                    tabChangeListener.onTabChanged(INDEX_BACK);
                }
                break;
        }
    }

    public void setCrewsNum(int leaveNum,int backNum){
        tvLeaveNum.setText(String.format(getResources().getString(R.string.leave_crews_num), String.valueOf(leaveNum)));
        tvBackNum.setText(String.format(getResources().getString(R.string.back_crews_num), String.valueOf(backNum)));

        if(leaveNum > 0 && backNum > 0){
            tvLeaveNum.requestFocus();
        }else if(leaveNum > 0 && backNum == 0){
            tvLeaveNum.setClickable(true);
            tvLeaveNum.setFocusable(true);
            tvBackNum.setClickable(false);
            tvBackNum.setFocusable(false);
            tvLeaveNum.requestFocus();
        }else if(leaveNum == 0 && backNum > 0){
            tvLeaveNum.setClickable(false);
            tvLeaveNum.setFocusable(false);
            tvBackNum.setClickable(true);
            tvBackNum.setFocusable(true);
            tvBackNum.requestFocus();
        }else{
            tvLeaveNum.setClickable(false);
            tvLeaveNum.setFocusable(false);
            tvBackNum.setClickable(false);
            tvBackNum.setFocusable(false);
        }
    }

    /**
     * TAB切換時(shí)的listener
     */
    public interface ITabChangeListener{
        public void onTabChanged(int index);
    }
}

3、使用方法

<com.hisign.ship_terminal_hs518.view.LeaveBackTitleTabView
      android:layout_width="232dp"
      android:layout_height="32dp"
      android:layout_marginTop="10dp"
      android:visibility="gone"
      android:id="@+id/lttTitle">
</com.hisign.ship_terminal_hs518.view.LeaveBackTitleTabView>

4、注冊(cè)回調(diào)事件（一般在UI界面上進(jìn)行注冊(cè)）

 /**
     * 離船和在船船員信息列表
 */
    private LeaveBackTitleTabView.ITabChangeListener iTabChangeListener = new LeaveBackTitleTabView.ITabChangeListener() {
        @Override
        public void onTabChanged(int index) {
            switch (index) {
                case LeaveBackTitleTabView.INDEX_LEAVE:
                    // 界面上點(diǎn)擊了離船
                    ll_leave_crews.setVisibility(View.VISIBLE);
                    ll_back_crews.setVisibility(View.GONE);
                    break;
                case LeaveBackTitleTabView.INDEX_BACK:
                    // 界面上點(diǎn)擊了在船
                    ll_back_crews.setVisibility(View.VISIBLE);
                    ll_leave_crews.setVisibility(View.GONE);
                    break;
            }
        }
    };

5、注意事項(xiàng)：

（1）、控件需要能響應(yīng)點(diǎn)擊事件，同時(shí)切換到某一選項(xiàng)時(shí)，該選項(xiàng)卡需要顯示選中的狀態(tài)，所以在控件中需要指定：

android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"

但是這樣設(shè)置了之后，控件就在點(diǎn)擊時(shí)就不能在點(diǎn)擊的第一下響應(yīng)onClick點(diǎn)擊事件，我的做法是響應(yīng)onFouceChange事件

（2）、為啥這樣設(shè)置，在點(diǎn)擊的第一下就不響應(yīng)onClick了呢？源碼中顯示w 在 onTouchEvent() 中的 MotionEvent.ACTION_UP 中對(duì)focus做了處理，如果View focusableInTouchMode 是true, 并且當(dāng)前沒有獲得焦點(diǎn), 那么會(huì)嘗試獲取焦點(diǎn), 并且不會(huì)調(diào)用 performClick()。

public boolean onTouchEvent(MotionEvent event) {
  ...
 if (((viewFlags & CLICKABLE) == CLICKABLE ||
         (viewFlags & LONG_CLICKABLE) == LONG_CLICKABLE) ||
         (viewFlags & CONTEXT_CLICKABLE) == CONTEXT_CLICKABLE) {
     switch (action) {
         case MotionEvent.ACTION_UP:
             boolean prepressed = (mPrivateFlags & PFLAG_PREPRESSED) != 0;
             if ((mPrivateFlags & PFLAG_PRESSED) != 0 || prepressed) {
                 boolean focusTaken = false;
                 if (isFocusable() && isFocusableInTouchMode() && !isFocused()) {
                     focusTaken = requestFocus();
                 }

                 if (prepressed) {
                     setPressed(true, x, y);
                }

                 if (!mHasPerformedLongPress && !mIgnoreNextUpEvent) {
                     removeLongPressCallback();
 
                     if (!focusTaken) {
                         if (mPerformClick == null) {
                             mPerformClick = new PerformClick();
                         }
                         if (!post(mPerformClick)) {
                             performClick();
                         }
                     }
                 }
 
 ...
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: