Android自定义选项卡切换效果

本文实例为大家分享了Android自定义选项卡切换效果的具体代码,供大家参考,具体内容如下

一、实际使用的效果

二、自定义可切换的标题栏

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切换时的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、注册回调事件(一般在UI界面上进行注册)

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

5、注意事项:

(1)、控件需要能响应点击事件,同时切换到某一选项时,该选项卡需要显示选中的状态,所以在控件中需要指定:

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

但是这样设置了之后,控件就在点击时就不能在点击的第一下响应onClick点击事件,我的做法是响应onFouceChange事件

(2)、为啥这样设置,在点击的第一下就不响应onClick了呢?源码中显示w 在 onTouchEvent() 中的 MotionEvent.ACTION_UP 中对focus做了处理, 如果View focusableInTouchMode 是true, 并且当前没有获得焦点, 那么会尝试获取焦点, 并且不会调用 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();
                         }
                     }
                 }

 ...
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿微信底部实现Tab选项卡切换效果

    在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单. 直接点击或者是滑动界面,都可以转到相应的页面. 效果图: 原理是用了三个按钮和View

  • Android组件TabHost实现页面中多个选项卡切换效果

    TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计. 一.基础知识 TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡; TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中; -- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡; -- 添加选项卡 : addTab(tabSpec); 二.实例讲解 TabHost的基本使用,主要是layout的

  • Android多个TAB选项卡切换效果

    在前一期中,我们做了悬浮头部的两个tab切换和下拉刷新效果,后来项目中要求改成三个tab,当时就能估量了一下,如果从之前的改,也不是不可以,但是要互相记住的状态就太多了,很容易出现错误.就决定重新实现一下这个效果,为此先写了一个demo,这期间项目都已经又更新了两个版本了.demo还木有变成文章. 之前的版本中是采用了一个可以下拉刷新的listview,之后在listview中添加了两个头部,并且在该布局上的上面用了一个一模一样的切换tab,如果没有看过前面版本的,可以看看前一个版本,Listv

  • Android ViewPager实现选项卡切换

    本文实例介绍了ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称"activity_main.xml" <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

  • Android自定义选项卡切换效果

    本文实例为大家分享了Android自定义选项卡切换效果的具体代码,供大家参考,具体内容如下 一.实际使用的效果 二.自定义可切换的标题栏 1.布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas

  • 很棒的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth

  • jQuery实现Tab选项卡切换效果简单演示

    本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-

  • Android自定义悬浮按钮效果

    本文实例为大家分享了Android自定义悬浮按钮效果的具体代码,供大家参考,具体内容如下 以下:内容没有参考,写的也是一个比较简单的例子,主要就是应用切换前后台时会显示/隐藏悬浮窗.内容仅用于自我记录学习使用. 项目的开发时应用在登陆后显示一个悬浮窗,同时显示在线人数等一些其他信息,点击悬浮按钮可以显示全局弹窗名单.开发完成后,觉着需要记录一下这种实现方式.所以写一个简单的Demo. Demo思路是通过启动Service来添加/移除 悬浮窗,因为是一个全局悬浮窗,所以选择依附于Service.

  • 基于javascript实现最简单的选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &

  • js实现Tab选项卡切换效果

    本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js&quo

  • 简单实现js选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下 实现思路: 1.首先获取id元素. 2.for循环历遍按钮元素添加onclick事件. 3.排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式. 4.下面的多个div内容块以此类推. 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • 很棒的js Tab选项卡切换效果

    本文实例为大家分享了js Tab选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; over

  • javascript实现tabs选项卡切换效果(扩展版)

    前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</title> <link rel="styleshe

随机推荐