利用HorizontalScrollView实现页签效果

       前段时间，由于项目中的需要，用到了类似页签的功能。这两天没什么时间，专门研究了一下。大致效果如下图：

         当点击顶部的tag的时候，文字的北京按钮，就会移动到相应的位置，下面的内容也会产生相应的变化。

        布局：

<RelativeLayout 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" ><HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content"    android:id="@+id/hsview" android:scrollbars="none" android:layout_marginTop="10dp">    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"        android:gravity="center_vertical">        <View android:id="@+id/view" android:layout_width="60dp" android:layout_height="30dp"            android:background="@drawable/tag_shape" android:visibility="visible"            android:tag="0"/>        <LinearLayout android:id="@+id/tag_lly" android:layout_width="match_parent"            android:layout_height="30dp" android:orientation="horizontal"            android:gravity="center_vertical"></LinearLayout>    </RelativeLayout></HorizontalScrollView><TextView android:id="@+id/content_tv" android:layout_width="wrap_content"    android:layout_height="wrap_content" android:background="@null"    android:text="测试" android:layout_centerHorizontal="true" android:layout_margin="10dp"    android:textColor="@color/commed_red" /></RelativeLayout>

         可以看到布局非常简单，主要就是一个HorizontalScrollView和一个textview，HorizontalScrollView主要是用来显示标签并进行标签的切换的，TextView根据点击的标签来显示不同的内容。

        代码：

public class MainActivity extends ActionBarActivity {    private View view;    private LinearLayout tagLLY;    private LinearLayout.LayoutParams params;    private String[] tags;    private int oldPosition=0;    private int newPosition=0;    private RelativeLayout.LayoutParams viewParams;    private int screenWidth;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        view=findViewById(R.id.view);        tagLLY= (LinearLayout) findViewById(R.id.tag_lly);        screenWidth=getResources().getDisplayMetrics().widthPixels;        viewParams= (RelativeLayout.LayoutParams) view.getLayoutParams();        viewParams.width=screenWidth/5-DipUtils.dipToPx(this,20);      viewParams.setMargins(DipUtils.dipToPx(MainActivity.this, 10),                DipUtils.dipToPx(MainActivity.this, 0),                DipUtils.dipToPx(MainActivity.this,10),                DipUtils.dipToPx(MainActivity.this,0));        view.setLayoutParams(viewParams);        tags=new String[]{"补水","祛痘","美白","美妆","美体","护肤","美甲"};        initView();    }    private void initView() {       for(int i=0;i<tags.length;i++)       {           TextView tv=new TextView(MainActivity.this);           tv.setText(tags[i]);           tv.setTextColor(getResources().getColor(R.color.commed_red));           params= new LinearLayout.LayoutParams(screenWidth/5-DipUtils.dipToPx(this,20), LinearLayout.LayoutParams.WRAP_CONTENT);           params.setMargins((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()),                   (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()),                   (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()),                   (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()));           tv.setGravity(Gravity.CENTER);           tv.setLayoutParams(params);           tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 13);           tv.setTag("tag"+i);           tv.setOnClickListener(new TagClick());           tagLLY.addView(tv);       }       TextView tv= (TextView) tagLLY.getChildAt(0);        tv.setTextColor(Color.WHITE);    }    private class TagClick implements View.OnClickListener {        @Override        public void onClick(View v) {            String  tag= (String) v.getTag();            newPosition= Integer.valueOf(tag.substring(tag.indexOf("g")+1));           /* TranslateAnimation ta=new TranslateAnimation(Animation.RELATIVE_TO_SELF,oldPosition            ,Animation.RELATIVE_TO_SELF,newPosition,Animation.RELATIVE_TO_SELF,0.0f,            Animation.RELATIVE_TO_SELF,0.0f);*/            int fromX=Integer.valueOf(view.getTag().toString());            int toX=newPosition*screenWidth/5;            TranslateAnimation ta=new TranslateAnimation(fromX,toX,0,0);            ta.setFillAfter(true);            ta.setDuration(200);            TextView textview= (TextView) tagLLY.findViewWithTag("tag" + oldPosition);            textview.setTextColor(getResources().getColor(R.color.commed_red));            oldPosition=newPosition;            view.setTag(toX);            view.startAnimation(ta);            ((TextView) v).setTextColor(Color.WHITE);        }    }}

         代码也非常简单，在onCreata方法中，主要初始化控件和数据的操作，在initview方法中我们初始化标签，并设置每一个Textview的数据和相应参数。并且为每一个Textview注册了一个点击事件，比较麻烦的就在这里了。

         可以看到在点击事件中，首先我们获取view也就是标签后面背景按钮的起始位置，然后计算出需要移动的终点，这个终点就是你当前点击的tag的位置乘以每个标签的宽度。然后把得到的这两个结果传入到TranslateAnimation中，就可以了。后面就是将当前的坐标位置，设置给view，重置之前的标签样式就可以了。