android 自定义view实现可左右滑动的Tabbar

最新推荐文章于 2024-08-26 03:44:09 发布

原创最新推荐文章于 2024-08-26 03:44:09 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #tabbar #属性值 #左右滑动 #自定义

android 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了如何在Android中创建一个可左右滑动的TabBar，通过HorizontalScrollView结合LinearLayout和Button实现。主要步骤包括重写onDraw()方法进行视图绘制，以及在onTouchEvent()中监听滑动和点击事件，同时实现自定义的点击事件接口，允许外部监听选中项的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用HorizontalScrollView+LinearLayout+Button就可以了，下文只是介绍了自定义View的绘制。

继承view，实现可左右滑动的tabbar。

1.通过重写onDraw(Canvas canvas)函数绘制item。

2.重写onTouchEvent(MotionEvent event)函数监听按下，移动，抬起事件实现tabbar的滑动及点击，但是return要设为true，move事件才会一直监听，最后调用this.invalidate()刷新，相当于重新执行onDraw(Canvas canvas)。

3.自定义点击事件接口和点击事件

//自定义监听器
private OnItemSelectedListener mItemSelectedListener = null;

//自定义点击事件接口
   public interface OnItemSelectedListener{
       public void onItemSelected(int select);
   }

   //自定义点击事件
   public void setOnItemSelected(OnItemSelectedListener selectListener){
       mItemSelectedListener = selectListener;

}

最后在点击事件执行时，触发点击事件

mItemSelectedListener.onItemSelected(selectItem);

在外部通过对象监听点击事件

//调用自定义点击事件
       tabbar.setOnItemSelected(new OnItemSelectedListener() {

           @Override
           public void onItemSelected(int select) {
               // TODO Auto-generated method stub

           }
       });

ScrollTabbarView.java

<span style="font-size:14px;">package com.kongge.scrolltabbar.tabbar;

import java.util.ArrayList;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ScrollTabbarView extends View{
	
	//自定义监听器
	private OnItemSelectedListener mItemSelectedListener = null;
	
	//初始Item的坐标以及每个item的横向空间大小
	private int FIRST_ITEM_POS_X = 10;
	private int FIRST_ITEM_POS_Y = 35;
	private int ITEM_BETWEEN_SPACE = 120;
	
	//屏幕宽高
	private int SCREEN_WIDTH;
	private int SCREEN_HEIGHT;
	
	//当前第一个item的绘制起点坐标
	private int current_position_x;
	private int current_position_y;
	
	private Context context;
	
	//持有item List对象，由函数传入
	private ArrayList<String> item_menu_list;
	
	private Canvas canvas;
	private Paint paint;
	
	//判断点击的标识符
	private boolean isSelected = false;
	//当前选择的item编号，若为-1，则没有选择
	private int selectItem = -1;

	public ScrollTabbarView(Context context) {
		super(context, null);
	}
	
	public ScrollTabbarView(Context context, AttributeSet attrs) {
		super(context, attrs, 0);
		this.context = context;
		init();
	}
	
	public void setMenuList(ArrayList<String> list){
		this.item_menu_list = list;
		init();
		this.invalidate();
	}
	
	/**
	 * 返回当前选择的item编号
	 * @return selectItem
	 */
	public int getSelectItem(){
		return selectItem;
	}
	
	
	private void init() {
		
		current_position_x = FIRST_ITEM_POS_X;
		current_position_y = FIRST_ITEM_POS_Y;
		
		
		
		paint = new Paint();
		paint.setColor(Color.BLACK);
		paint.setTextSize(35);
		
	}
	
	//清除选择
	public void clearSelected(){
		selectItem = -1;
	}

	@Override
	protected void onDraw(Canvas canvas) {
		
		this.canvas = canvas;
		
		//这里获取画布宽高，要是写在构造函数里，则获取的都为0，因为那时候都没有创建view
		SCREEN_WIDTH = this.getWidth();
		SCREEN_HEIGHT = this.getHeight();
		
		int position_x = current_position_x;
		int position_y = current_position_y;

		for(int i = 0;i<item_menu_list.size();i++){
			//当选择了某个item时，则将那个item绘制成红色
			if (selectItem == i) {
				paint.setColor(Color.RED);
				canvas.drawText(item_menu_list.get(i) + "", position_x, position_y, paint);
				paint.setColor(Color.BLACK);
			}else{
				canvas.drawText(item_menu_list.get(i) + "", position_x, position_y, paint);
			}
			//将坐标后移一个单位空间，绘制下一个item
			position_x += ITEM_BETWEEN_SPACE;
			
		}
		
		super.onDraw(canvas);
	}
	
	//储存按下时，当前第一个item的位置
	private int point_x = 0;
	private int point_y = 0;
	
	private int point_down_x = 0;
	private int point_down_y = 0;
	
	private int point_up_x = 0;
	private int point_up_y = 0;
	
	private int point_move_x = 0;
	private int point_move_y = 0;
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		
		
		
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			point_down_x = (int)event.getX();
			point_down_y = (int)event.getY();
			
			point_x = current_position_x;
			
			isSelected = true;
			
			break;
			
		case MotionEvent.ACTION_MOVE:
			
			point_move_x = (int)event.getX();
			point_move_y = (int)event.getY();
			
			//为了使点击事件灵敏，将滑动不超过10的滑动事件当做点击处理，要是改成0，点击事件可以触发，但是很不灵敏
			if (Math.abs(point_move_x - point_down_x) > 10) {
				isSelected = false;
				System.out.println("isSelected="+isSelected);
				current_position_x = point_move_x - point_down_x + point_x;
				
				//不能再往右滑
				if (current_position_x > FIRST_ITEM_POS_X) {
					current_position_x = FIRST_ITEM_POS_X;
				}
				
				//不能再往左滑
				if (current_position_x < SCREEN_WIDTH - (FIRST_ITEM_POS_X + item_menu_list.size()*ITEM_BETWEEN_SPACE)) {
					current_position_x = SCREEN_WIDTH - (FIRST_ITEM_POS_X + item_menu_list.size()*ITEM_BETWEEN_SPACE);
				}
				
				
			}
			
			break;
			
		case MotionEvent.ACTION_UP:
			if (isSelected) {
				point_up_x = (int)event.getX();
				point_up_y = (int)event.getY();
				selectItem = (int)((point_up_x - FIRST_ITEM_POS_X - current_position_x)/ITEM_BETWEEN_SPACE);
				//触发点击事件
				mItemSelectedListener.onItemSelected(selectItem);
			}
			
			isSelected = false;
			
			break;

		default:
			break;
		}
		
		this.invalidate();
		
		
		return true;
	}
	
	//自定义点击事件接口
	public interface OnItemSelectedListener{
		public void onItemSelected(int select);
	}
	
	//自定义点击事件
	public void setOnItemSelected(OnItemSelectedListener selectListener){
		mItemSelectedListener = selectListener;
	}
	
}</span>

activity_main.xml

<span style="font-size:14px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kongge.scrolltabbar.MainActivity" 
    android:orientation="vertical"
    >
    
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
        android:id="@+id/tv_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:text="全部" 
        />
    
    <com.kongge.scrolltabbar.tabbar.ScrollTabbarView 
        android:id="@+id/tabbar"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:clickable="true"
        />
        
    </LinearLayout>

    <TextView
        android:id="@+id/tv_selected"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="select"
        />

</LinearLayout></span>

MainActivity.java

<span style="font-size:14px;">package com.kongge.scrolltabbar;

import java.util.ArrayList;

import com.kongge.scrolltabbar.tabbar.ScrollTabbarView;
import com.kongge.scrolltabbar.tabbar.ScrollTabbarView.OnItemSelectedListener;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity implements OnClickListener{

	private TextView tv_all;
	private ScrollTabbarView tabbar;
	private TextView tv_selected;
	
	private ArrayList<String> list;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		init();
		
	}

	private void init() {
		
		tv_all = (TextView)findViewById(R.id.tv_all);
		tabbar = (ScrollTabbarView)findViewById(R.id.tabbar);
		tv_selected = (TextView)findViewById(R.id.tv_selected);
		
		list = new ArrayList<String>();
		String[] items = new String[]{"item01","item02","item03","item04","item05","item06","item07","item08"};
		for(String str : items){
			list.add(str);
		}
		
		tabbar.setMenuList(list);
		
		//调用自定义点击事件
		tabbar.setOnItemSelected(new OnItemSelectedListener() {
			
			@Override
			public void onItemSelected(int select) {
				// TODO Auto-generated method stub
				tv_selected.setText(list.get(select));
				tv_all.setTextColor(Color.BLACK);
			}
		});
		
		tv_all.setOnClickListener(this);
		
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.tv_all:
			
			tv_all.setTextColor(Color.RED);
			tabbar.clearSelected();
			tv_selected.setText("全部");
			
			break;

		default:
			break;
		}
		
		//刷新view
		tabbar.invalidate();
		
	}
	
	
}</span>