android随笔18——平移动画

<span style="color:#ff0000;">MainActivity </span>

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost;

import itcast.zz.myapp.R;

public class MainActivity extends TabActivity implements View.OnClickListener {
          /**
            * TabHost 的使用步骤：
            * 1- 在布局文件中，声明指定ID的tabHost \ tabWidget \ FrameLayout
            * 2- 让MainActivity 继承自 TabActivity
            * 3- tabHost = getTabHost(); 获得tabHost
            * 4- 参照：addTab 方法 添加标签
            */
     //获得TabHost
    private TabHost tabHost;
    private ImageView ivSlide;
    private LinearLayout llConversation;
    private LinearLayout llFolder;
    private LinearLayout llGroup;

    private final String conversation = "conversation";
    private final String folder = "folder";
    private final String group = "group";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView的执行,Activity就会调用onContentChanged()
        setContentView(R.layout.activity_main);


        //直接通过getTabHost()即可获得, 因为在TabActivity的onContentChanged()中已经写过findbyid了
        tabHost = getTabHost();

//        //创建标签  参数可以认为是标签的命名
//        TabHost.TabSpec tabSpec = tabHost.newTabSpec("conversation");
//
//        //设置标签的文字和图标
//        tabSpec.setIndicator("会话",getResources().getDrawable(R.drawable.tab_conversation));
//
//        //设置内容
//        Intent intent = new Intent(this,ConversationUi.class);
//        tabSpec.setContent(intent);
//
//        //添加标签
//        tabHost.addTab(tabSpec);
        
        addTab("conversation","会话",R.drawable.tab_conversation,ConversationUi.class);
        addTab("folder","文件夹",R.drawable.tab_folder,FolderUi.class);
        addTab("group","群组",R.drawable.tab_group,GroupUi.class);

        ivSlide = (ImageView) findViewById(R.id.iv_slide_bg);
        llConversation = (LinearLayout) findViewById(R.id.ll_conversation);
        llFolder = (LinearLayout) findViewById(R.id.ll_folder);
        llGroup = (LinearLayout) findViewById(R.id.ll_group);

        llConversation.setOnClickListener(this);
        llFolder.setOnClickListener(this);
        llGroup.setOnClickListener(this);

        // 初始化滑动图片的大小和位置

        // 在onCreate 不能直接获得控件的大小，位置，因为此时，还没有测量控件，也没有指定位置
//		int width = llConversation.getWidth();
//		System.out.println("width:"+width);

        // 获得view树的观察者
        ViewTreeObserver viewTreeObserver = llConversation.getViewTreeObserver();
        //添加一个全局改变位置的监听
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            //当位置大小改变后调用此方法
            public void onGlobalLayout() {

                int width = llConversation.getWidth();
                int height = llConversation.getHeight();
//		        System.out.println("width:"+width);

                //获得布局参数,设置宽,高,注意,布局参数一定要和父View的类型保持一致
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams)ivSlide.getLayoutParams();
                layoutParams.width = width;
                layoutParams.height = height;

                // llConversation 在其父view中的左边距
                int left = llConversation.getLeft();
                //为滑动框设置左边距
                layoutParams.leftMargin = left;
                //有些android版本的兼容性问题
//                ivSlide.setLayoutParams(layoutParams);

                //设置图片框移动的距离 即屏幕的1/3
                itemLength = ((View)llConversation.getParent()).getWidth();
            }
        });
    }

    /**
     * 添加标签
     * @param tabName 标签的命名 在屏幕上显示不出来 是TabHost用来管理标签用的
     * @param tabLabel 标签的显示标题文字
     * @param iconId 图标
     * @param clazz Activity的字节码
     */
    private void addTab(String tabName, CharSequence tabLabel, int iconId, Class<?extends Activity> clazz) {
        //创建标签  参数可以认为是标签的命名

        TabHost.TabSpec tabSpec = tabHost.newTabSpec(tabName);

        //设置标签的文字和图标
        tabSpec.setIndicator(tabLabel,getResources().getDrawable(iconId));

        //设置内容
        Intent intent = new Intent(this,clazz);
        tabSpec.setContent(intent);

        //添加标签
        tabHost.addTab(tabSpec);

        //添加标签
        tabHost.addTab(tabSpec);
    }

    /**
     * 滑动图片所移动的单位长度 = 屏幕的1/3
     */
    private int itemLength;
    /**
     * 滑动图片做动画时的开始位置
     */
    private int lastPosition;
    @Override
    /**
     * @param v 点击的view
     */
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.ll_conversation : //点击会话标签
                ivSlide.startAnimation(getAnimation(0));// 为当前view设置动画  目标位置为起点 0
                //为当前位置赋值 起始位置 0
                lastPosition =  0;
                break;
            case R.id.ll_folder : //点击文件夹标签
                TranslateAnimation ta = getAnimation(itemLength);
                ivSlide.startAnimation(ta);// 为当前view设置动画 即ta
                //每一次动画执行完之后,都应该更新最新的当前位置,将上一次的目标位置赋值为新的当前位置
                lastPosition =  itemLength;

                break;
            case R.id.ll_group : //点击群组标签
                ivSlide.startAnimation(getAnimation(itemLength*2));// 为当前view设置动画以及动画的目标位置
                //为当前位置赋值
                lastPosition =  itemLength*2;

                break;
        }

    }

    @NonNull
    /**
     * 创建一个从当前位置到 目标位置的平移动画
     * @param destPosition 目标位置
     */
    private TranslateAnimation getAnimation(float destPosition) {
        TranslateAnimation ta = new TranslateAnimation(
                Animation.ABSOLUTE,lastPosition,  //ABSOLUTE绝对值 动画的原点坐标为它所在的view的左上角
                Animation.ABSOLUTE,destPosition,
                Animation.ABSOLUTE,0,
                Animation.ABSOLUTE,0);
        ta.setDuration(300);//动画的持续时间 毫秒值
        ta.setFillAfter(true); //是否保持动画完成时的状态
        return ta;
    }
}

activity_main.xml
<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"
    tools:context=".MainActivity" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" >
            </TabWidget>

            <!-- 写一个布局来替换 TabWidget 的导航功能 -->

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="8dp"
                android:paddingBottom="8dp"
                android:background="#aaa" >

                <ImageView
                    android:id="@+id/iv_slide_bg"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/slide_background" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <!-- 第一个三分之一 -->

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal" >

                        <!-- 会话标签 -->

                        <LinearLayout
                            android:id="@+id/ll_conversation"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical"
                            android:paddingLeft="10dp"
                            android:paddingRight="10dp" >

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:background="@drawable/tab_conversation" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="会话" />
                        </LinearLayout>
                    </LinearLayout>

                    <!-- 第二个三分之一 -->

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal" >

                        <LinearLayout
                            android:id="@+id/ll_folder"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical" >

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:background="@drawable/tab_folder" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="文件夹" />
                        </LinearLayout>
                    </LinearLayout>

                    <!-- 第三个三分之一 -->

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal" >

                        <LinearLayout
                            android:id="@+id/ll_group"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical"
                            android:paddingLeft="10dp"
                            android:paddingRight="10dp" >

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_margin="3dp"
                                android:background="@drawable/tab_group" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="群组" />
                        </LinearLayout>
                    </LinearLayout>
                </LinearLayout>
            </RelativeLayout>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</RelativeLayout>
还需要新建三个Activity:

public class ConversationUi extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView text= new TextView(this);
        text.setText("我是会话页面");
        setContentView(text);
    }
}
public class FolderUi extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView text= new TextView(this);
        text.setText("我是文件夹页面");
        setContentView(text);
    }
}
public class GroupUi extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView text= new TextView(this);
        text.setText("我是群组页面");
        setContentView(text);
    }
}