1. 程式人生 > >Android基礎————UI佈局之UI美化分解詳解

Android基礎————UI佈局之UI美化分解詳解

UI美化
(1)color資源:
1、values的color常量:
引用方式:@color/xxx
	1. 設定字型的顏色
	   android:textColor="@color/white"

	2. 設定佈局的背景顏色
	   android:background="@color/white"
2、drawable的color資源
	1、 在drawable目錄下建立.xml檔案,根標籤為<color>
	2、在<color>標籤中使用其android:color屬性設定顏色值(如:#RGB或@color/xxx)
	3、一般作為背景使用,引用方式:@drawable/xxx

(2)Level-list:(例項是開關燈效果、android系統電池狀態改變的顯示)

注意:
<!-- textColor 使用values中定義好的color沒有問題
     drawable中建立了一個xml(跟標籤color》》》》屬於drawable》》》》一般用在背景)
-->

在level-List中可以放置多張圖片,根據優先順序顯示不同圖片;
level-list屬於drawable中資原始檔,跟標籤是<level-list>;

建立item指定圖片以及層級就可以實現:
 <item  
        android:drawable="@drawable/lamp_off"
        android:minLevel="0"
        android:maxLevel="20"
        />
(3)layer-list圖層資源:
將多個圖片按層關係排放形成一張圖片,類似幀佈局;
屬於drawable中資原始檔,根標籤為<layer-list>;

建立item指定圖片以及層級就可以實現:
    <item android:drawable="@drawable/back" ></item>
    
    <item android:drawable="@drawable/qq"
        android:left="10dp"
        android:right="20dp"
        android:top="20dp"
        android:bottom="30dp"
        ></item>
(4)selector背景選擇器:
作用:根據UI控制元件的不同狀態選擇相應的圖片或顏色資源作為控制元件的背景
常用的狀態:
android:state_checked="false|true" 是否勾選的狀態
android:state_selected="false|true" 是否選擇的狀態
android:state_pressed="false|true" 點選或按下的狀態	
預設顯示的圖片必須放在後面
android:state_enabled=“false|true“ 是設定是否響應事件,指所有事件

用法:
1. 在drawable目錄下建立.xml檔案,根標籤為<selector>
2. 增加<item>標籤,並設定不同狀態和對應的資源:
	<1>.  設定drawable selector資源如下:
    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/ic_relation_gray" android:state_checked="false"></item>
    <item android:drawable="@drawable/ic_relation_red" android:state_checked="true"></item>
</selector>

	<2>. 設定color selector資源如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:color="#000" android:state_checked="false" />
    <item android:color="#f00" android:state_checked="true" />
</selector>

3、在UI控制元件的background屬性引用,屬性值:@drawable/xx;@color/xx

(5)style樣式:
作用:android中的樣式用於為介面控制元件定義顯示風格,其包含一個或者多個view控制元件屬性的集合。如:需要定義字型的顏色和大小
位置:res/values/styles.xml
定義樣式:
 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>


--參考系統的style.xml,路徑:
/sdk/platforms/android-19/data/res/values/styles.xml

--參考系統的themes.xml,路徑:
/sdk/platforms/android-19/data/res/values/themes.xml

引用樣式:在指定UI控制元件的style屬性引用指定樣式:
引用樣式前:
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

引用樣式後:
<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
屬性的優先順序高於樣式。

樣式的兩種繼承:
1.parent屬性方式
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

2.字首方式來繼承
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">  //使用parent屬性

//字首方式來繼承。
<style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

<style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
 </style>

 (6)clip裁剪:clip實現圖片的裁剪

1.clip屬於drawable中資原始檔,跟標籤是<clip>:
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/android1"
    android:clipOrientation="vertical"
    android:gravity="bottom">
    
	<!-- android:drawable: 指定要裁剪的原影象
		 android:clipOrientation:設定裁剪的方向 水平或者垂直 
		 android:gravity:表示如何裁剪(從哪個方向開始)-->
</clip>

2.預設不顯示,程式碼中設定裁剪漸變出來
ClipDrawable  drawable = (ClipDrawable) imageView.getDrawable();
/**
* 裁剪比例:ClipDrawable類內部預設了一個最大level值10000(Android SDK並未提供api修改該值)
* 如果level值為0,表示裁剪的寬度或者高度為0,也就是說,影象無法顯示。如果值為10000 表示顯示全部影象(不進行任何裁剪)
*/
drawable.setLevel(drawable.getLevel()+1000);

(7)Inset:屬於drawable中資原始檔,跟標籤是<inset>

inset屬於drawable中資原始檔,跟標籤是<inset>
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/inset"
    android:insetLeft="50dp"
    android:insetRight="50dp"
    android:insetTop="50dp"
    android:insetBottom="50dp"
    >
</inset>
元素解釋:
android:insetTop:影象距離上邊的距離。

android:insetRight:影象距離右側的距離。

android:insetBottom:影象距離底邊的距離。

android:insetLeft:影象距離左側的距離。

(8)transition過度效果:transition實現圖片的過度效果

1.transition屬於drawable中資原始檔,跟標籤是<transition>
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable = "@drawable/lamp_off"/>
    <item android:drawable = "@drawable/lamp_on"/>

</transition>

2.程式碼中設定過度效果
private void initView() {
		// TODO Auto-generated method stub
		image =(ImageView) findViewById(R.id.image);
		transitionDrawable = (TransitionDrawable) image.getDrawable();
	}
	
public void btnOnClick(View view){
		switch (view.getId()) {
		case R.id.btnOpen:
			transitionDrawable.startTransition(3000);
			break;
		case R.id.btnClose:
			transitionDrawable.reverseTransition(3000);
			break;
		default:
			break;
		}
	}

相關推薦

Android基礎————UI佈局UI美化分解

UI美化 (1)color資源: 1、values的color常量: 引用方式:@color/xxx 1. 設定字型的顏色 android:textColor="@color/white" 2. 設定佈局的背景顏色 android:background

Android基礎(一)佈局2.UI控制元件

1.文字框 <TextView android:id="@+id/txtOne" android:layout_width="match_parent" android:layout_height="wrap_content"

Android基礎相關面試問題-binder面試問題

面試 連接 跨進程通信 通信機制 識別 man 系統 linu 資源 Linux內核的基礎知識: 進程隔離/虛擬地址空間:在操作系統中為了保護某個進程互不幹擾就設計了一個叫“進程隔離”的技術,防止進程A可以操作進程B的數據。而進程隔離技術用到了

Android中Canvas繪圖Shader使用圖文

概述 我們在用Android中的Canvas繪製各種圖形時,可以通過Paint.setShader(shader)方法為畫筆Paint設定shader,這樣就可以繪製出多彩的圖形。那麼Shader是什麼呢?做過GPU繪圖的同學應該都知道這個詞彙,Shader就

Android系統執行架構--生產-消費者模型

一個系統是如何執行起來的?通過安卓的原始碼分析我們大概可以知道,Android在驅動層,在上層都採取生產-消費者模型來構建整個系統;因此對於生產-消費者模型的理解,就顯得十分重要;首先通過下圖,讓大家對生產-消費者模型有一個初步認識: 生產者負責向佇

安卓UI佈局checkbox

首先看一下效果圖: 佈局檔案如下如所示: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android App效能優化UI流暢度優化

一、卡頓的問題本質 UI流暢度的優化主要是解決UI卡頓的現象,而UI卡頓的源頭就是渲染效能的問題。佈局太複雜或者是一個元素重複繪製多次等原因,Android系統無法及時完成那些複雜的介面渲染操作,這樣就發生了丟幀,使用者就會感覺到不流暢,卡頓。 Androi

Android開源專案實踐UI篇-李忠義-專題視訊課程

Android開源專案實踐之UI篇—18365人已學習 課程介紹        本課程主要展現瞭如何利用Android開原始碼進行app的開發。例如: 1.非同步網路請求(android-async-http); 2.百變圓形滾動條(ProgressWheel);3.滑動導航

android菜鳥筆記UI執行緒阻塞

最近在學習Android,有些還是需要記錄下來,方便以後查詢 首先 當一個應用程式啟動之後,android系統會為這個應用程式建立一個主執行緒。這個執行緒非常重要,它負責渲染檢視,分發事件到響 應監聽器並執行, 對介面進行輪詢的監聽。因此,一般也叫做“UI”執行緒。andr

ANDROID基礎ACTIVITY篇Activity的生命周期

tle 其他 size create android 生命周期 系統 and line 首先我們先來看一下官方的Android的生命周期圖: 根據這個流程圖我們可以看到Activity的生命周期一共有7個方法,那麽接下來我們就來聊聊這些方法執行過程。 1.啟動Activi

Android基礎——快速開發定制BaseTemplate

temp .net fonts The 成了 抽取 一份 應該 我們 初學者肯定會遇到一個日常任務,那麽就是findViewById,setOnClickListener(暫且把它們稱為日常任務),而且很多人會把他們混在一起,導致項目結構混亂,最主要的是寫多了會煩,不覺得嗎

Android基礎——快速開發打造萬能適配器

臃腫 log 思想 代碼分析 htm 考試報名 做了 順序 基礎 這裏以ListView作演示,對於ListView我們再熟悉不過了,其步驟分為: 創建ListView的Bean對象 創建ListView的Adapter的ItemView布局 創建ListView的Ada

Android基礎知識-佈局優化

在Android中介面繪製是比較費時的,尤其是巢狀比較複雜的介面,所以我們會用一些技巧來優化佈局。 Android提供了以下標籤或控制元件來供我們優化佈局: 1.<include> 這個標籤

Android基礎——四大元件Activity

1.Activity          >概念:活動面板   應用程式元件  可以繪製Ui介面  可以和使用者進行互動     預設展示全屏  其他情況 介面比其他視窗小  懸浮在其他視窗上方     >建立一個Activity         >1,建立

Android基礎(一)佈局1.常用佈局

一.線性佈局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tool

Android基礎(一)佈局3.編輯框元件

xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" a

Android基礎(一)佈局4.下拉框

xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" a

Android基礎(一)佈局7.自定義佈局

title.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android基礎ListView的使用

今天給大家帶來《android應用開發全程實錄》中關於listview和adatper中的部分。包括listview的基本使用,listview的優化等。 我們經常會在應用程式中使用列表的形式來展現一些內容,所以學好ListView是非常必需的。ListView也是Android中比較難以使用的控制元件,這

android studio 介面佈局表格佈局

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.c