android ui 練習

最近在練習安卓ui，有時候一個人在學校自學安卓挺困難的，很多時候都想放棄學習。心裡好像放棄。但是事實又不得不去學習。希望自學安卓的朋友共同努力。先看我練習的效果圖吧。

先看布局吧，就是練習下相對布局的運用。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" >


    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/icon_home" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="dp"
        android:layout_height="dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageView
            android:id="@+id/icon_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="dp"
            android:background="@drawable/icon_search" />

        <ImageView
            android:id="@+id/icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/icon_menu" />

        <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="dp"
            android:background="@drawable/icon_myyouku" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="dp"
        android:layout_height="dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3" >

        <ImageView
            android:id="@+id/channel1"
            android:layout_width="dp"
            android:layout_height="dp"
            android:layout_marginLeft="dp"
            android:background="@drawable/channel1"
            android:layout_alignParentBottom="true"
            />

        <ImageView
            android:id="@+id/channel2"
            android:layout_width="dp"
            android:layout_height="dp"
            android:layout_above="@id/channel1"
            android:layout_alignLeft="@id/channel1"
            android:layout_marginBottom="dp"
            android:layout_marginLeft="dp"
            android:background="@drawable/channel2" />

        <ImageView
            android:id="@+id/channel3"
            android:layout_width="dp"
            android:layout_height="dp"
            android:layout_above="@id/channel2"
            android:layout_alignLeft="@id/channel2"
            android:layout_marginBottom="dp"
            android:layout_marginLeft="dp"
            android:background="@drawable/channel3" />
        <ImageView
            android:id="@+id/channel4"
            android:layout_width="dp"
            android:layout_height="dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="dp"
            android:background="@drawable/channel4" />



        <ImageView
            android:id="@+id/channel7"
            android:layout_width="dp"
            android:layout_height="dp"
            android:background="@drawable/channel7"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="dp"
            />


        <ImageView
            android:id="@+id/channel6"
            android:layout_width="dp"
            android:layout_height="dp"
            android:layout_above="@id/channel7"
            android:layout_alignRight="@id/channel7"
            android:layout_marginRight="dp"
            android:background="@drawable/channel6" />


        <ImageView
            android:id="@+id/channel5"
            android:layout_width="dp"
            android:layout_height="dp"
            android:layout_above="@id/channel6"
            android:layout_alignRight="@id/channel6"
            android:layout_marginRight="dp"
            android:background="@drawable/channel5"
            />
    </RelativeLayout>

</RelativeLayout>
           

布局有點不太好看，自己可以再調下

接下來就是再看代碼吧。MainActivity:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private RelativeLayout level2, level3;
    private ImageView home, menu;
    private boolean isLevel3 = true;
    private boolean isLevel2 = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /**
         * 執行個體化level2,level3
         */
        level2 = (RelativeLayout) findViewById(R.id.level2);
        level3 = (RelativeLayout) findViewById(R.id.level3);

        /**
         * 執行個體化home menu
         */
        home = (ImageView) findViewById(R.id.icon_home);
        menu = (ImageView) findViewById(R.id.icon_menu);
        /**
         * 為home menu 添加事件
         */
        home.setOnClickListener(this);
        menu.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.icon_menu:
                if (isLevel3) {
                    Utils.startAnimOut(level3);//出去的動畫
                } else {
                    Utils.startAnimIn(level3);//進入的動畫
                }
                isLevel3 = !isLevel3;
                break;

            case R.id.icon_home:
                if (isLevel2) {
                    Utils.startAnimOut(level2);
                   //判斷三級菜單是否是顯示
                    if (isLevel3) {
                        Utils.startAnimOut(level3);
                        isLevel3 = false;
                    }
                } else {
                    Utils.startAnimIn(level2);
                    if (isLevel3) {
                        Utils.startAnimIn(level3);
                        isLevel3 = false;
                    }
                }
                isLevel2 = !isLevel2;

                break;


        }
    }
}
           

我把動畫的操作另寫到一個類中了，友善操作。

Utils代碼如下：

import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

/**
 * Created by Administrator on 2016/6/9.
 */
public class Utils extends  Animation {

    public static void startAnimOut(RelativeLayout level3) {
        /**  執行個體化旋轉動畫，
         * 參數1： 起始角度
         * 參數2：終止角度
         * 參數3和參數4：代表圓心的位置
         */
        RotateAnimation animation=new RotateAnimation(,,level3.getWidth()/,level3.getHeight());
         animation.setDuration();//設定動畫時長
        animation.setFillAfter(true);//設定動畫不恢複到原來的狀态。
        level3.startAnimation(animation);//開啟動畫
    }

    public static void startAnimIn(RelativeLayout level3) {
        RotateAnimation animation=new RotateAnimation(,,level3.getWidth()/,level3.getHeight());
        animation.setDuration();
        animation.setFillAfter(true);
        level3.startAnimation(animation);
    }
}
           

圖檔資源下載下傳

http://download.csdn.net/detail/song_shui_lin/9545439

本人學生，有錯望指正。謝謝。