Android初體驗(yàn)--設(shè)計(jì)一個(gè)菜單動(dòng)畫

Android初體驗(yàn)--設(shè)計(jì)一個(gè)菜單動(dòng)畫

1.目的 通過(guò)菜單動(dòng)畫項(xiàng)目的設(shè)計(jì)對(duì)Android開發(fā)有一個(gè)最初的認(rèn)識(shí)和體驗(yàn),了解相關(guān)的知識(shí)和技能。

2.代碼如下

(1)MainActivity.java

package com.example.day1_menuAnimation;

import android.animation.ObjectAnimator;

import android.os.Bundle;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

import com.google.android.material.snackbar.Snackbar;

import androidx.appcompat.app.AppCompatActivity;

import androidx.appcompat.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

import android.view.animation.BounceInterpolator;

import android.widget.ImageView;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

/**

* 1.獲取xml里面所有的圖片視圖

*? -先用一個(gè)數(shù)組保存所有視圖的id號(hào) R.id.iv_b

*? -用一個(gè)數(shù)組保存所有id號(hào)對(duì)應(yīng)的視圖

*/

? ? private int[]resID = {R.id.iv_b,R.id.iv_c,R.id.iv_d,R.id.iv_e,R.id.iv_f,R.id.iv_g,R.id.iv_h};

? ? private ListimageViews=new ArrayList<>();

? ? private boolean isOpen=false;

? ? /**

* 定義一個(gè)變量 記錄按鈕的狀態(tài)

? ? * @param savedInstanceState

? ? */

? ? @Override

? ? protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

? ? ? ? setContentView(R.layout.activity_main);

? ? ? ? Toolbar toolbar = findViewById(R.id.toolbar);

? ? ? ? setSupportActionBar(toolbar);

? ? ? ? FloatingActionButton fab = findViewById(R.id.fab);

? ? ? ? fab.setOnClickListener(new View.OnClickListener() {

@Override

? ? ? ? ? ? public void onClick(View view) {

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

.setAction("Action", null).show();

? ? ? ? ? ? }

});

? ? ? ? /**

* 將id號(hào)對(duì)應(yīng)圖片視圖讀取出來(lái) 放到ImageViews里面

*/

? ? ? ? for(int i=0;i

int id=resID[i];

? ? ? ? ? ? ImageView img=findViewById(id);

? ? ? ? ? ? imageViews.add(img);

? ? ? ? }

}

@Override

? ? public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

? ? ? ? getMenuInflater().inflate(R.menu.menu_main, menu);

? ? ? ? return true;

? ? }

@Override

? ? public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

? ? ? ? int id =item.getItemId();

? ? ? ? //noinspection SimplifiableIfStatement

? ? ? ? if (id ==R.id.action_settings) {

return true;

? ? ? ? }

return super.onOptionsItemSelected(item);

? ? }

public void imgClicked(View view) {

/**

* 判斷是打開還是關(guān)閉

*/

? ? ? ? if(isOpen==true){

close();

? ? ? ? }else{

open();

? ? ? ? }

isOpen=!isOpen;

? ? }

private void close(){for (int i=0;i

ImageView iv=imageViews.get(i);

? ? ? ? ObjectAnimator oa =ObjectAnimator.ofFloat(iv,"translationY",(i+1)*200,0f);

? ? ? ? oa.setDuration(1000);

? ? ? ? oa.start();

? ? }

}

private void open () {

for (int i =0; i

ImageView iv =imageViews.get(i);

? ? ? ? ? ? ? ? ObjectAnimator oa =ObjectAnimator.ofFloat(iv, "translationY", 0f, (i +1) *200);

? ? ? ? ? ? ? ? oa.setDuration(1000);

? ? ? ? ? ? ? ? oa.setInterpolator(new BounceInterpolator()); ? ?? //添加動(dòng)畫彈彈彈

? ? ? ? ? ? ? ? oa.start();

? ? ? ? ? ? }

}}

(2) content_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

? ? xmlns:app="http://schemas.android.com/apk/res-auto"

? ? xmlns:tools="http://schemas.android.com/tools"

? ? android:layout_width="match_parent"

? ? android:layout_height="match_parent"

? ? app:layout_behavior="@string/appbar_scrolling_view_behavior"

? ? tools:context=".MainActivity"

? ? tools:showIn="@layout/activity_main">

? ? ? ? android:id="@+id/iv_b"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/b" ? ? ? ? ? ? ? ?? //從素材中取出按鍵b

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_c"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/c"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_d"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/d"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_e"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/e"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_f"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/f"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_g"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/g"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_h"

? ? ? ? android:layout_width="60dp"

? ? ? ? android:layout_height="60dp"

? ? ? ? android:src="@mipmap/h"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:layout_marginTop="5dp"/>

? ? ? ? android:id="@+id/iv_a"

? ? ? ? android:layout_width="100dp"

? ? ? ? android:layout_height="100dp"

? ? ? ? android:src="@mipmap/a"

? ? ? ? android:layout_centerHorizontal="true"

? ? ? ? android:onClick="imgClicked"/>

</RelativeLayout>

2.技術(shù)步驟如下:(1)下載按鍵的素材,將其移動(dòng)到mipmap中。

(2)在content_main.xml中編輯按鍵素材的尺寸,將按鍵移到中軸線處( android:layout_centerHorizontal="true")為了使界面美觀使用 android:layout_marginTop="5dp"調(diào)整按鍵與頂部的距離使紅色按鍵a將其余按鍵全部覆蓋。并給每個(gè)按鍵視圖設(shè)置id號(hào) 以便后續(xù)操作簡(jiǎn)便。

(3) 為了獲取xml里面所有的圖片視圖在MainActivity.java中先用一個(gè)數(shù)組保存所有視圖的id號(hào) R.id.iv_b。再用一個(gè)數(shù)組保存所有id號(hào)對(duì)應(yīng)的視圖(代碼如上)

(4)在xml中的素材a里定義一個(gè)變量以記錄按鍵的狀態(tài)。并在onCreat方法里實(shí)現(xiàn)該變量相關(guān)的方法。

(5)使用for循環(huán)插入動(dòng)畫 ObjectAnimator oa =ObjectAnimator.ofFloat(iv, "translationY", 0f, (i +1) *200);

ObjectAnimator oa =ObjectAnimator.ofFloat(iv,"translationY",(i+1)*200,0f);實(shí)現(xiàn)按鍵的下拉和回彈 ? 并用if語(yǔ)句控制按鍵的下拉和回彈功能。

最終功能如下:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容