`

TabSwitcher自定义控件(带拖动&滑动效果)

android 
阅读更多
上一篇实现了滑动效果，还是不爽，这次还添加了拖动效果，请大家帮忙测试。

上传于8.5 1:30
8.5 4：15一次更新 



package com.ql.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.ql.app.R;

public class TabSwitcher extends FrameLayout{

	private static final String tag="TabSwitcher";
	private Context context;
	private String[] texts;
	private int arrayId;
	private int selectedPosition=0;
	private int oldPosition=selectedPosition;
	private ImageView iv;
	private LinearLayout.LayoutParams params;
	private LinearLayout layout;
	private int iv_width;
	private TextView[] tvs;
	public TabSwitcher(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		init();
	}
	public TabSwitcher(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		Log.i(tag, "--------------TabSwitcher2---------------------");
		init();
		TypedArray a=context.obtainStyledAttributes(attrs,R.styleable.custom);  
		arrayId=a.getResourceId(R.styleable.custom_arrayId, 0);
//		selectedPosition=a.getInt(R.styleable.custom_selectedPosition, 0);
        a.recycle();
	}
	private void init(){
		context=getContext();
		FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT,FrameLayout.LayoutParams.WRAP_CONTENT);
		setLayoutParams(params);
		setBackgroundResource(R.drawable.tabswitcher_long);
		
	}
	
	@Override
	protected void onFinishInflate() {
		// TODO Auto-generated method stub
		super.onFinishInflate();
		Log.i(tag, "--------------onFinishInflate---------------------");
		if(arrayId!=0){
			texts=getResources().getStringArray(arrayId);
		}else{
			texts=new String[]{};
		}
		tvs=new TextView[texts.length];
	}

	OnClickListener listener = new OnClickListener(){

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			selectedPosition=(Integer)v.getTag();
			if(tvs[selectedPosition].isClickable()){
				tvs[oldPosition].setClickable(true);
				tvs[selectedPosition].setClickable(false);
				doAnimation();
				
				oldPosition=selectedPosition;
				if(onItemClickLisener!=null){
					onItemClickLisener.onItemClickLisener(v, selectedPosition);
				}
			}
			
		}
		
	};
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		// TODO Auto-generated method stub
		super.onSizeChanged(w, h, oldw, oldh);
		Log.i("tag", "---------------onSizeChanged--------------------");
		if(selectedPosition>texts.length-1){
			throw new IllegalArgumentException("The selectedPosition can't be > texts.length.");
		}
		layout=new LinearLayout(context);
		params=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,this.getMeasuredHeight());//为了居中显示文字
		params.weight=1;
		params.gravity=Gravity.CENTER_VERTICAL;
		for(int i=0;i<texts.length;i++){
			TextView child=new TextView(context);
			child.setTag(i);
			child.setText(texts[i]);
			child.setTextSize(16);
			child.setTextColor(Color.BLACK);
			child.setGravity(Gravity.CENTER);
			child.setOnClickListener(listener);
			if(i==selectedPosition){
				child.setClickable(false);
			}else{
				child.setClickable(true);
			}
			tvs[i]=child;
			layout.addView(child,params);
		}
		
		oldPosition=selectedPosition;
		//
		iv_width=this.getMeasuredWidth()/texts.length;//计算ImageView的宽
//		LinearLayout.LayoutParams p=new LinearLayout.LayoutParams(iv_width,LinearLayout.LayoutParams.FILL_PARENT);
		LinearLayout.LayoutParams p=new LinearLayout.LayoutParams(iv_width,this.getMeasuredHeight());
//		p.leftMargin=selectedPosition*iv_width;//无效，因为FrameLayout必须对齐左上角。
		iv=new ImageView(context);
//		iv.setImageResource(R.drawable.tabswitcher_short);
//		iv.setScaleType(ScaleType.FIT_XY);
		iv.setBackgroundResource(R.drawable.tabswitcher_short);
		iv.setOnTouchListener(touchListener);
		iv.setClickable(true);
		this.addView(iv,p);
		this.addView(layout,params);
	}
	
	private void doAnimation(){
//		TranslateAnimation animation = new TranslateAnimation(oldPosition*iv_width, selectedPosition*iv_width, 0, 0);  
		iv.layout(selectedPosition*iv_width, iv.getTop(),
	        		selectedPosition*iv_width+iv.getWidth(), iv.getBottom());//很关键！
		TranslateAnimation animation = new TranslateAnimation((oldPosition-selectedPosition)*iv_width, 0, 0, 0);  
		animation.setInterpolator(new LinearInterpolator());  
		animation.setDuration(400);  
		animation.setFillAfter(true);  
		iv.startAnimation(animation);  
	}
	
	private OnItemClickLisener onItemClickLisener;
	public void setOnItemClickLisener(OnItemClickLisener onItemClickLisener) {
		this.onItemClickLisener = onItemClickLisener;
	}
	public interface OnItemClickLisener{
		void onItemClickLisener(View view,int position);
	}
	
	public void setTexts(String[] texts) {
		this.texts = texts;
	}
//	public void setSelectedPosition(int selectedPosition) {
//		this.selectedPosition = selectedPosition;
//	}
	
	OnTouchListener touchListener=new OnTouchListener(){
		int temp[] = new int[]{0, 0};
		@Override
		public boolean onTouch(View v, MotionEvent event) {
			// TODO Auto-generated method stub
			int action = event.getAction();
			int x = (int)event.getRawX()-getLeft();//获得拖动点在屏幕的坐标
//			int x = (int)event.getX();//很奇怪，为什么这样x就会“跳”呢？
//			Log.i(tag, "x======="+x);
//            int y = (int)event.getRawY();//只能水平拖动，所以y方向不需要
			switch (action) {
			case MotionEvent.ACTION_DOWN:
				temp[0] = (int)event.getX();  
//                temp[1] = (int)(y-v.getTop());
                v.postInvalidate();
			break;
			case MotionEvent.ACTION_MOVE:
				int left = x - temp[0];  
                int right = left + v.getWidth();  
//                int top = y - temp[1];  
//                int bottom = top + v.getHeight();  
                int top=0;//y
                int bottom=0+v.getHeight();
                if (left < 0){//边界判断
                    left = 0;
                    right = left + v.getWidth();
                }

                if (right > getMeasuredWidth()){
                    right = getMeasuredWidth();
                    left = right - v.getWidth();
                }

                /*if (top < 0) {  
                    top = 0;  
                    bottom = top + v.getHeight();  
                }  

                if (bottom > getMeasuredHeight()) {  
                    bottom = getMeasuredHeight();  
                    top = bottom - v.getHeight();  
                }*/
                v.layout(left, top, right, bottom);
                v.postInvalidate();
			break;
			case MotionEvent.ACTION_UP:
				tvs[oldPosition].setClickable(true);
				setBestPosition();
				if(oldPosition!=selectedPosition){//回调
					if(onItemClickLisener!=null){
						onItemClickLisener.onItemClickLisener(tvs[selectedPosition], selectedPosition);
					}
				}
				oldPosition=selectedPosition;//
			    tvs[selectedPosition].setClickable(false);
			break;
			}
			return false;
		}
		
	};
	/**
	 * 获得最佳停留位置
	 */
	private void setBestPosition() {
		int left = iv.getLeft();
        selectedPosition = Math.round(1.0F*left/iv_width);//四舍五入
        int toPosition = selectedPosition*iv_width;
        iv.layout(selectedPosition*iv_width, iv.getTop(),
        		selectedPosition*iv_width+iv.getWidth(), iv.getBottom());
        TranslateAnimation animation = new TranslateAnimation(left-toPosition,0,0,0);
        animation.setInterpolator(new LinearInterpolator());  
        animation.setDuration(400);
		animation.setFillAfter(true);  
        iv.startAnimation(animation);
//        iv.invalidate();
        
    }
}


package com.ql.app;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Toast;

import com.ql.view.TabSwitcher;
import com.ql.view.TabSwitcher.OnItemClickLisener;

public class App extends Activity{
	private Context context;
	private TabSwitcher tabSwitcher;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        context=this;
        tabSwitcher=(TabSwitcher)findViewById(R.id.tabSwitcher);
        
        tabSwitcher.setOnItemClickLisener(onItemClickLisener);
//        tabSwitcher.setTexts(new String[]{"1","2","3"});
    }
    
	
    OnItemClickLisener onItemClickLisener=new OnItemClickLisener(){

		@Override
		public void onItemClickLisener(View view, int position) {
			// TODO Auto-generated method stub
			//
			switch (position) {
			case 0:
			case 1:
			case 2:
			case 3:
			case 4:
				Log.i("App", "position:"+position);
//				Toast.makeText(context, "position clicked:"+position, Toast.LENGTH_SHORT).show();
				break;

			default:
				break;
			}
		}
    	
    };
}

  • 大小: 55 KB
分享到：
| TabSwitcher自定义控件(带滑动效果)
评论
17 楼 轩xuanyuanzhuo 2015-10-27  
为什么把activity换成Fragment 就不显示了啊
16 楼 zhudandan829 2012-05-25  
真不明白“拖动”tab的意思lz懂不懂。。。。
15 楼 createAndroid 2012-03-28  
不能拖动呀。。。。还是我不理解你的意思，怎么拖法呢，是拖动整个控件吗？
14 楼 yang668 2011-12-27  
楼主在UI方面的知识真是无懈可击啊
13 楼 金剑89 2011-08-23  
gundumw100 写道
金剑89 写道
为什么2.2运行正常，2.1就显示不了，查了下api level 无果，你知道原因吗?

显示不了?什么显示不了

就是四个tab不论字还是背景都都没，你用模拟器试试
12 楼 gundumw100 2011-08-23  
金剑89 写道
为什么2.2运行正常，2.1就显示不了，查了下api level 无果，你知道原因吗?

显示不了?什么显示不了
11 楼 金剑89 2011-08-23  
为什么2.2运行正常，2.1就显示不了，查了下api level 无果，你知道原因吗?
10 楼 gundumw100 2011-08-16  
lmhdlcode 写道
楼主不上论坛了吗？
提到的bug不知道修改了吗

没改，得另想办法。
9 楼 lmhdlcode 2011-08-16  
楼主不上论坛了吗？
提到的bug不知道修改了吗
8 楼 yangjiantong 2011-08-09  
很不错哦，不知道楼主能否在tab页也加点内容，不太会加，见优亿市场那下面好像是个listview控件，还是感谢楼主的奉献精神!
7 楼 gundumw100 2011-08-08  
lmhdlcode 写道
在试验的过程中发现一个bug
你在第二个tab页放一个EditText空间。
当第一次选择第二个tab页的时候，然后点击EditText，让EditText获得焦点，
这时候tab标签的选中变成第一个tab标签了。（就是选中的从 【应用】变为【游戏】上面了）
第二次就正常了。

我也发现这个问题了，我发现只要弹出输入法和弹出输入提示的时候才会发生这种情况。这个时候layout大小变了，执行了onLayout()方法，但我也不知道为什么。
6 楼 lmhdlcode 2011-08-08  
在试验的过程中发现一个bug
你在第二个tab页放一个EditText空间。
当第一次选择第二个tab页的时候，然后点击EditText，让EditText获得焦点，
这时候tab标签的选中变成第一个tab标签了。（就是选中的从 【应用】变为【游戏】上面了）
第二次就正常了。
5 楼 Mjing 2011-08-05  
我进来了，谢谢你呀！
4 楼 lmhdlcode 2011-08-05  
能不能做一个下面带tab的例子，tab页也能拖动，并且上面标签随着tab页的动而动。
3 楼 jeasinlee 2011-08-05  
楼主，赞一个！~
2 楼 gundumw100 2011-08-05  
qi19901212 写道
如果有图就好了

看上一篇就知道了
1 楼 qi19901212 2011-08-05  
如果有图就好了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    TabSwitcher自定义控件(不带滑动效果)

    《TabSwitcher自定义控件：打造不带滑动效果的UI组件》 在Android应用开发中，界面设计和用户体验是至关重要的因素。一个优秀的应用不仅需要功能强大，还需要有一个直观且美观的用户界面。TabSwitcher控件是实现多...

    TabSwitcher自定义控件(带滑动效果)

    【标题】"TabSwitcher自定义控件(带滑动效果)"揭示了本文将要讨论的是一个特定的Android开发中的自定义用户界面组件。TabSwitcher控件通常用于在多个选项卡之间切换，而且这个控件增加了滑动交互，使得用户体验更加...

    Android定制RadioButton样式三种实现方法

    三种方法 1.使用XML文件进行定义 res/drawable/radio.xml 代码如下: &lt;...– 未选中-&gt; ”false” android:drawable=”@drawable/tabswitcher_long”&gt; &lt;!–选中-&gt; &lt;item android:state_checked=”true” andr

    TabSwitcher-crx插件

    TabSwitcher尝试通过让您##如何使用来解决此问题。安装后，按`CTRL + SHIFT + K'或`CMD + SHIFT + K'以显示选项卡切换器。您可以按Enter或使用鼠标键导航到选项卡。您可以在任何选项卡上按分号（即“;”）键关闭该...

    tabswitcher-crx插件

    语言:English tl;博士还记得textmate的命令t？ Chrome是相同的。 警告：必须在Chrome的扩展中手动设置快捷方式...... tl;博士还记得textmate的命令t？ Chrome是相同的。 警告：必须在Chrome的扩展设置中手动设置快捷...

    Radio Button

    在更复杂的场景中，可以通过`setCompoundDrawablesWithIntrinsicBounds()`方法来设置RadioButton的四周绘制元素，例如，将数字替换为图片，或者自定义一个带有选中状态的Drawable并将其设置为RadioButton的`...

    sitepoint-tabswitcher

    （带有NPM） 安装 git clone 此存储库 切换到新目录 npm install bower install 运行/开发 ember server 访问您的应用程序，为 。 代码生成器 利用许多生成器生成代码，尝试使用ember help generate更多详细信息 ...

    AndroidTabSwither:一个简单好用的Android Tab实现

    `AndroidTabSwither`是一个专为Android平台设计的简单易用的Tab实现库，它允许开发者创建带有可绘制元素和文本元素的选项卡。这个库提供了一种灵活的方式，开发者可以根据自己的需求选择只显示图形或文本，或者两者...

    Android系统浏览器源码+UML分析图

    本资源提供了Android系统浏览器的源码以及对应的UML（Unified Modeling Language）分析图，这对于理解浏览器的工作原理、优化性能、自定义功能或开发自己的浏览器应用都有着极大的帮助。 一、Android系统浏览器源码...

    Tab Switcher-crx插件

    语言:English 快速过滤和切换窗口和选项卡 使用选项卡切换器，您可以仅使用键盘快速切换到其他打开的选项卡，包括按部分名称或URL匹配过滤选项卡。...隐私政策请在http://flowapps.co/tabswitcher/privacypoli

    标签切换器「Tab Switcher」-crx插件

    快速控制，过滤和切换标签 ...请在https://github.com/kallepersson/tabswitcher中查看源代码。如何更改键盘快捷键以显示Tab切换器？ –很简单，您可以在扩展设置页面底部更改键盘快捷键！ 支持语言:English

    提前制表符：Web浏览器扩展，可帮助您按标题和URL快速查找打开的制表符

    在实际使用中，用户可能需要安装并启用这个扩展，然后在浏览器的某个指定位置（如地址栏旁或自定义快捷键）启动搜索功能。对于经常需要处理大量标签页的用户，例如研究人员、内容创作者或是多任务处理者来说，"提前...

Magicbox
Global site tag (gtag.js) - Google Analytics