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

来源:互联网 发布:mac 快捷方式到桌面 编辑:程序博客网 时间:2024/05/16 01:39

继承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;}@Overrideprotected void onDraw(Canvas canvas) {this.canvas = canvas;//这里获取画布宽高,要是写在构造函数里,则获取的都为0,因为那时候都没有创建viewSCREEN_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);}//将坐标后移一个单位空间,绘制下一个itemposition_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;@Overridepublic 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;@Overrideprotected 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() {@Overridepublic void onItemSelected(int select) {// TODO Auto-generated method stubtv_selected.setText(list.get(select));tv_all.setTextColor(Color.BLACK);}});tv_all.setOnClickListener(this);}@Overridepublic 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;}//刷新viewtabbar.invalidate();}}</span>







0 0
原创粉丝点击