Android移動應(yīng)用開發(fā)案例教程（模塊二 視頻播放項目UI設(shè)計）

Android移動應(yīng)用開發(fā)案例教程模塊二視頻播放項目UI設(shè)計任務(wù)1SplashUI設(shè)計任務(wù)2主界面頂部標題欄設(shè)計任務(wù)3主界面設(shè)計任務(wù)4底部菜單欄設(shè)計任務(wù)5視頻列表設(shè)計任務(wù)6播放器控制面板設(shè)計任務(wù)7視頻播放界面設(shè)計任務(wù)8引導(dǎo)界面設(shè)計

任務(wù)1SplashUI設(shè)計1AndroidManifest.xml的配置AndroidManifest.xml是應(yīng)用清單，每個應(yīng)用的根目錄中都必須包含一個，并且文件名必須一模一樣。這個文件中包含了APP的配置信息，系統(tǒng)需要根據(jù)里面的內(nèi)容運行APP的代碼，顯示界面。任務(wù)1SplashUI設(shè)計2Android布局Android中常用的布局有6種：LinearLayout（線性布局）、RelativeLayout（相對布局）、TableLayout（表格布局）、GridLayout（網(wǎng)絡(luò)布局）、FrameLayout（幀布局）、ConstraintLayout（約束布局），這些布局各自有自己的布局特點，在布局中要綜合利用這些布局。屬性名稱屬性值描述id@+id/***設(shè)置唯一標識background顏色、圖片或選擇器設(shè)置背景heightwrap_content/match_parent/自定義設(shè)置高度widthwrap_content/match_parent/自定義設(shè)置寬度gravitytop/bottom/left容器中子組件的對齊方式layout_gravitytop/bottom/left組件在父組件中的對齊方式padding***數(shù)值內(nèi)邊距margin***數(shù)值外邊距任務(wù)1SplashUI設(shè)計2Android布局

（1）線性布局Linearlayout線性布局LinearLayout是Android系統(tǒng)中最基礎(chǔ)一種布局。采用自上而下或者從左往右的方式將一個元素接著一個元素排列，當排列的元素超出屏幕范圍時，超出的部分將做隱藏處理。屬性名稱屬性值描述orientationhorizontal（水平排列）vertical（垂直排列）設(shè)置組件排列方式weight數(shù)值按權(quán)重分割父布局任務(wù)1SplashUI設(shè)計2Android布局

（2）相對布局RelativeLayout相對布局RelativeLayout是位置相對于兄弟組件或者布局容器的一種布局管理器。它繼承于android.widget.ViewGroup，其按照子元素之間的位置關(guān)系完成布局，作為Android系統(tǒng)布局中最靈活也是最常用的一種布局方式，非常適合于一些比較復(fù)雜的界面設(shè)計。任務(wù)1SplashUI設(shè)計2Android布局

（2）相對布局RelativeLayout相對于父容器的屬性：屬性名稱屬性值描述alignParentLefttrue/false將控件的左邊緣和父控件的左邊緣對齊alignParentToptrue/false將控件的上邊緣和父控件的上邊緣對齊alignParentRighttrue/false將控件的右邊緣和父控件的右邊緣對齊alignParentBottomtrue/false將控件的底邊緣和父控件的底邊緣對齊centerInParenttrue/false將控件置于父控件的中心位置centerHorizontaltrue/false將控件置于水平方向的中心位置centerVerticaltrue/false將控件置于垂直方向的中心位置任務(wù)1SplashUI設(shè)計2Android布局

（2）相對布局RelativeLayout相對于兄弟組件的屬性：屬性名稱屬性值描述layout_above@id/xxx將控件置于給定ID控件之上layout_below@id/xxx將控件置于給定ID控件之下layout_toLeftOf@id/xxx將控件置于給定ID控件左側(cè)layout_toRightOf@id/xxx將控件置于給定ID控件右側(cè)layout_alignLeft@id/xxx將控件的左邊緣和給定ID控件的左邊緣對齊layout_alignTop@id/xxx將控件的上邊緣和給定ID控件的上邊緣對齊layout_alignRight@id/xxx將控件的右邊緣和給定ID控件的右邊緣對齊layout_alignBottom@id/xxx將控件的底邊緣和給定ID控件的底邊緣對齊任務(wù)1SplashUI設(shè)計2Android布局

（3）網(wǎng)格布局GridLayout該布局使用虛線將布局劃分為行、列和單元格，也支持一個控件在行、列上都有交錯排列。網(wǎng)絡(luò)布局更接近于人們所理解的表格。對于一個網(wǎng)格布局來說，需要明確劃分成幾行幾列。GridLayout網(wǎng)格布局常用的屬性：屬性名稱屬性值描述orientationhorizontal/vertical子元素的布局方向columnCount數(shù)值最大列數(shù)rowCount數(shù)值最大行數(shù)任務(wù)1SplashUI設(shè)計2Android布局

（3）

GridLayout網(wǎng)格布局中子元素常用的屬性：屬性名稱屬性值描述layout_column數(shù)值顯示該子控件的列l(wèi)ayout_row數(shù)值顯示該子控件的行l(wèi)ayout_columnSpan數(shù)值該控件所占的列數(shù)rowCount數(shù)值最大行數(shù)任務(wù)1SplashUI設(shè)計2Android布局

（4）幀布局FrameLayout所有添加到這個布局中的視圖都以層疊的方式顯示。第一個添加的組件放到最底層，最后添加到布局中的視圖顯示在最上面。上一層的會覆蓋下一層的控件。幀布局沒有什么特有屬性，在使用時可以通過設(shè)置組件的margin、layout_gravity來控制組件的位置。任務(wù)1SplashUI設(shè)計2Android布局

（5）表格布局TableLayoutTableLayout繼承了LinearLayout，因此它的本質(zhì)依然是線性布局管理器。每次向TableLayout中添加一個TableRow，該TableRow就是一個表格行。TableRow也是容器，因此它也可以不斷地添加其他組件，每添加一個子組件該表格就增加一列。如果直接向TableLayout中添加組件，那么這個組件將直接占用一行。屬性名稱屬性值描述Shrinkable數(shù)值，列數(shù)從0開始如果某個列被設(shè)為Shrinkable，那么該列的所有單元格的寬度可以被收縮，以保證該表格能適應(yīng)父容器的寬度Stretchable數(shù)值，列數(shù)從0開始如果某個列被設(shè)為Stretchable，那么該列的所有單元格的寬度可以被拉伸，以保證組件能完全填滿表格空余空間Collapsed數(shù)值，列數(shù)從0開始如果某個列被設(shè)為Collapsed，那么該列的所有單元格會被隱藏任務(wù)1SplashUI設(shè)計2Android布局

（6）約束布局ConstraintLayout項目中的布局嵌套問題對我們的項目性能有著不小的影響。布局能實現(xiàn)扁平化會讓軟件性能得到很大的提升。此它同時具有RelativeLayout和LinearLayout的優(yōu)點、特性，功能強大。約束布局從相對定位、居中定位、偏向、尺寸約束、比例、鏈條、環(huán)形定位等方面約束組件的位置。任務(wù)1SplashUI設(shè)計2Android布局

（6）約束布局ConstraintLayout居中定位屬性：居中方向?qū)傩灾邓絘pp:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"垂直app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"水平垂直都居中水平+垂直任務(wù)1SplashUI設(shè)計2Android布局

（6）約束布局ConstraintLayout偏向?qū)傩裕簩傩悦Q描述layout_constraintHorizontal_bias水平(0最左邊1最右邊，默認是0.5)layout_constraintVertical_bias垂直(0最上邊1最底邊，默認是0.5)任務(wù)1SplashUI設(shè)計2Android布局

（6）約束布局ConstraintLayout相對定位屬性：屬性名稱屬性值描述layout_constraint***_to***Of

@id/***或者parentlayout_constraint***里的***代表是這個子控件自身的哪條邊(Left、Right、Top、Bottom、Baseline)，而to***Of里的***代表的是和約束控件的哪條邊發(fā)生對齊(Left、Right、Top、Bottom、Baseline)任務(wù)1SplashUI設(shè)計2Android布局

（6）約束布局ConstraintLayout比例屬性：舉例：只有一個方向約束必須有至少一個相對定位(id/parent)layout_constraintXxx_toXxxOf，需要將至少一個約束維度設(shè)置為0dp。app:layout_constraintDimensionRatio="2:1"(寬:高=2:1)舉例：指定要改變的維度如果兩個維度均設(shè)置為0dp，也可以使用比例，屬性layout_constraintDimensionRatio="H,2:1"則表示動態(tài)改變高度，高度調(diào)整為控件寬度的二分之—，比例始終都是

寬：高。屬性名稱描述app:layout_constraintDimensionRatio約束比例，用逗號分隔方向(,)，用冒號(:)分隔比例任務(wù)1SplashUI設(shè)計3基礎(chǔ)控件

（1）TextView標簽

TextView是一種顯示文本信息的控件，該控件直接繼承于View，從功能上看，類似于網(wǎng)頁中的標簽Label控件。屬性名稱描述android:id這是唯一地標識控件的IDandroid:gravity設(shè)置文本位置，如設(shè)置成“center”，文本將居中顯示android:drawable***在text的左/右/上/下面位置顯示一個drawable，如圖片android:textStyle設(shè)置字形bold(粗體)、italic(斜體)、粗+斜(bold|italic)android:text要顯示的文字android:textColor文本顏色?？梢允且粋€顏色值，如形式“#rgb”，

“#argb”，“#rrggbb”，和“#aarrggbb”android:textSize文字的大小。文字推薦尺寸類型是“sp”的比例像素（例如：15sp）。android:background背景圖片android:singleLine單行顯示任務(wù)1SplashUI設(shè)計3基礎(chǔ)控件

（2）ImageView

ImageView用來顯示Drawable對象資源的控件，繼承于View控件。屬性名稱描述android:src設(shè)置控件的Drawable資源android:scaleType設(shè)置圖片的縮放或移動的方式以適應(yīng)控件的大小android:maxWidth設(shè)置控件的最大寬度界面的實現(xiàn)android:adjustViewBounds設(shè)置是否保持寬高比。需要與maxWidth、MaxHeight一起使用，否則單獨使用沒有效果android:cropToPadding如果屬性設(shè)為true，該組件將會被裁剪到保留該ImageView的paddingandroid:maxHeight設(shè)置控件的最大高度，單獨使用無效，需要與setAdjustViewBounds一起使用。如果要設(shè)置圖片固定大小，又要保持圖片寬高比，則需要進行如下設(shè)置：（1）設(shè)置setAdjustViewBounds為true；（2）設(shè)置maxWidth、maxHeight；（3）設(shè)置layout_width和layout_height為wrap_content任務(wù)1SplashUI設(shè)計4Activity

Activity是Android的是四大組件之一，也是使用最為頻繁的組件。生活中如打電話、發(fā)信息，用戶需要與手機進行交互，在Android系統(tǒng)中就是通過Activity來實現(xiàn)的。在Android應(yīng)用程序中一般會有多個Activity，每一個Activity負責(zé)一個用戶界面的展現(xiàn)。通常一個用戶界面有一些基本組件（如按鈕、文本、列表等），并對這些基本組件編寫相應(yīng)的實現(xiàn)代碼（完成事件處理）。任務(wù)1SplashUI設(shè)計5Handler

Android為我們提供了一個消息機制即Handler。Handler寫在主線程中，創(chuàng)建一個handler并實現(xiàn)handleMessage方法。方法名字方法功能handleMessage(Messagemsg)處理消息的方法，通常是用于被重寫sendEmptyMessage(intwhat)發(fā)送空消息sendEmptyMessageDelayed(intwhat,longdelayMillis)指定延時多少毫秒后發(fā)送空信息sendMessage(Messagemsg)立即發(fā)送信息sendMessageDelayed(Messagemsg)指定延時多少毫秒后發(fā)送信息任務(wù)1SplashUI設(shè)計6省略標題欄

Android中如果我們不需要標題欄，那么我們可以將其去除，去除的方法大體可以分為兩種：代碼中實現(xiàn)和AndroidManifest.xml配置文件中實現(xiàn)。（1）代碼實現(xiàn)setContentView（R.layout.main）之前加入：requestWindowFeature(Window.FEATURE_NO_TITLE);if(getSupportActionBar()!=null)

{

getSupportActionBar().hide();

}

（2）配置文件中實現(xiàn)<application>標簽注冊中修改Activity的主題樣式。android:theme="@style/Theme.AppCompat.NoActionBar"

（3）全屏的實現(xiàn)Activity中onCreate()方法的setContentView()代碼下面加入如下的語句。ViewdecorView=getWindow().getDecorView();decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);任務(wù)1SplashUI設(shè)計7事件處理事件處理包含三要素：事件源、發(fā)生了什么事件、事件處理者。事件處理步驟：（1）找到事件源

（2）為事件源注冊監(jiān)聽器：事件源.add***Listener()（3）編寫事件處理者事件處理者的編寫常用有三種方法：（1）匿名對象（2）使用本類（3）內(nèi)部類任務(wù)2主界面頂部標題欄設(shè)計任務(wù)2主界面頂部標題欄設(shè)計1ViewFlipperAndroid自帶的一個多頁面管理控件ViewFlipper，它可以自動播放實現(xiàn)圖片翻轉(zhuǎn)功能。為ViewFlipper控件加入View有兩種方法。靜態(tài)導(dǎo)入：所謂的靜態(tài)導(dǎo)入就是像上面布局參考代碼加粗顯示的代碼行，用<include>將每個頁面添加到ViewFlipper的中間。動態(tài)導(dǎo)入：在Java程序中通過addView方法填充View，方法名字方法功能setInAnimation設(shè)置View進入屏幕時使用的動畫setOutAnimation設(shè)置View退出屏幕時使用的動畫showNext調(diào)用該方法來顯示ViewFlipper里的下一個ViewshowPrevious調(diào)用該方法來顯示ViewFlipper的上一個ViewsetFilpInterval設(shè)置View之間切換的時間間隔setAutoStart設(shè)置ViewFlipper自動翻轉(zhuǎn)stopFlipping停止View切換任務(wù)2主界面頂部標題欄設(shè)計2手勢識別一般情況下，我們知道View類有個View.OnTouchListener內(nèi)部接口，通過重寫它的onTouch(Viewv,MotionEventevent)方法，我們可以處理一些touch事件，但是這個方法太過簡單，如果需要處理一些復(fù)雜的手勢，用這個接口就會很麻煩。Android

SDK給我們提供了GestureDetector（Gesture：手勢Detector：識別）類，通過這個類我們可以識別很多的手勢。GestureDetector這個類對外提供了兩個接口和一個內(nèi)部類：接口：OnGestureListener，OnDoubleTapListener內(nèi)部類：SimpleOnGestureListener任務(wù)3主界面設(shè)計任務(wù)4底部菜單欄設(shè)計任務(wù)4底部菜單欄設(shè)計1CircularReveal動畫特效這里的動畫需要使用ViewAnimationUtils庫來實現(xiàn)，但是該庫是5.0以后才引入的，所以無法滿足低版本。使用開源庫CircularReveal，主要是提供了波浪式的展開和回縮動畫，利用這個庫提供的動畫再自定義一下就很容易實現(xiàn)動畫的效果了。createCircularReveal中參數(shù)的解釋如下：staticAnimatorcreateCircularReveal(Viewview,intcenterX,intcenterY,floatstartRadius,floatendRadius)view：就是需要執(zhí)行動畫的對象，此處為底部菜單的圖片。centerX：動畫中心點X坐標centerY：動畫中心點Y坐標startRadius：動畫開始時的圓半徑endRadius：動畫結(jié)束時的圓半徑最后設(shè)置動畫時長和延遲，就可以執(zhí)行動畫了。任務(wù)4底部菜單欄設(shè)計2FragmentFragment是Android3.0后引入的一個新的API，他出現(xiàn)的初衷是為了適應(yīng)大屏幕的平板電腦，當然現(xiàn)在它仍然是平板APPUI設(shè)計的寵兒，而且我們普通手機開發(fā)也會加入這個Fragment，我們可以把他看成一個小型的Activity，又稱Activity片段。Fragment并不能單獨使用，他需要嵌套在Activity中使用，盡管它擁有自己的生命周期，但是還是會受到宿主Activity的生命周期的影響，比如Activity被destroy銷毀了，它也會跟著銷毀。任務(wù)4底部菜單欄設(shè)計2Fragment

Activity包含A和B兩個FragmentABA中選擇一項新聞后在B中顯示新聞內(nèi)容A中選擇一項新聞后打開BActivityActivityA包含AFragmentActivityB包含BFragment平板手機任務(wù)5主界面視頻列表界面設(shè)計任務(wù)5主界面視頻列表界面設(shè)計1控件的顯示與隱藏當界面上的某個控件在界面加載之初需要隱藏時，可以在所在布局的XML文件中修改android:visibility屬性，屬性值有三種。visibility屬性值含義gone隱藏、所占位置也不可見visible可見,默認狀態(tài)invisible不可見，但所占位置保留,顯示一個透明的空間任務(wù)5主界面視頻列表界面設(shè)計2RecyclerViewRecyclerView是support-v7包中的新組件，是一個強大的滑動組件，與經(jīng)典的ListView相比，同樣擁有item回收復(fù)用的功能，這一點從它的名字RecyclerView即回收view也可以看出。官方對于它的介紹則是：RecyclerView是ListView的升級版本，更加先進和靈活?？梢詫崿F(xiàn)水平、垂直、網(wǎng)絡(luò)、瀑布流等布局，還可以實現(xiàn)分組、頂部標題懸浮、拖動和滑動刪除等功能。瀑布流布局任務(wù)6控制面板設(shè)計任務(wù)6控制面板設(shè)計1SeekBar進度條，可以實現(xiàn)視頻播放進度和聲音的調(diào)節(jié)。方法名字方法功能android:max滑動條的最大值android:progress滑動條的當前值android:secondaryProgress二級滑動條的進度android:thumb滑塊的drawable任務(wù)6控制面板設(shè)計2編寫選擇器

在Android開發(fā)過程中，經(jīng)常對某一個View的背景在不同的狀態(tài)下，設(shè)置不同的背景，增強用戶體驗。如果按鈕，在按下時，背景變化，如果在代碼中動態(tài)設(shè)置，相對比較麻煩。Android為我們提供了selector背景選擇器可以非常方便的解決這一問題