9-Patch PNGによるListViewのフィレット表示

14599 ワード
ListView
フィレット(Fillet)といえば、onDrawメソッドを上書きして自分でフィレット(Fillet)を描く人が多いかもしれませんが、以前他のWindowsプログラムを書いたことがあるかもしれません.Delphiのような人はもっと衝動的でしょう.しかし、Androidでは、そんなに面倒な必要はありません.実際にAndroidシステム全体のUIはStyleに基づいて実現されています.興味のある友达はAndroidのソースコードを研究して、Button、Radioがどのように実現されているかを見てみると、AndroidのUIシステムが非常に強く、簡単で、面白いことがわかります.ここでは、リストビューを例に、Styleを使用してフィレット(Fillet)を実現する方法について説明します(どのコントロールがフィレットされているか考えてみましょう).
Styleとは
AndroidシステムのUIはすべて1つのStyleに基づいて表示され、同じコントロールで、1つのStyleに変えると、効果はまったく違います.Styleは、文字属性、色設定、背景の設定を含む表示属性の集合である、Styleの集合はThemeを構成する.特に、Style定義では、異なるシーン(Normal,Pressed,Disabled)で1つのコントロールの表示を記述するSelectorがよく見られる.ファイル:drawable/setting_button.xml 
1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="true"  android:drawable="@drawable/setting_icon_pressed"/>
	<item android:state_focused="true"  android:drawable="@drawable/setting_icon_pressed"/>
	<item android:drawable="@drawable/setting_icon_normal"/> 
</selector>

これは最も簡単なselector定義で、pressedまたはfocusedでアイコン@drawable/setting_を表示するボタンが1つあることを意味します.icon_pressed、そうでない場合@drawable/setting_が表示されますicon_normal、このselector自体はbuttonのandroid:backgroundプロパティで使用できます.たとえば、android:background='@drawable/setting_button”.そうすると、Androidはボタンを押すと自動的に背景画像を切り替えます.
9-Patchとは
背景画像といえば、画像の大きさやスケールの問題を連想するに違いない.9-Patchについてお話しします.まず、Googleの公式ツールに関する1つのスクリーンショットを見てみましょう.
まず、これは1つのPNGピクチャです.次にdraw 9 patchで開くと、エッジに1画素点の透明枠が自動的に追加されます.この枠はあなたの仕事の範囲で、左クリックすると1つの黒い点が追加され、右クリックすると1つの黒い点が削除され、これらの黒い点がつながった線は9-Patch画像の効果を構成します.ここで、左と上はピクチャのスケール範囲、右と下はコンテンツのPadding範囲を表します.
ちょっとよくわからないようですが?このツール(android sdkのtoolsディレクトリの下)を実行し、1つのPNGピクチャをドラッグして中に入り、下の2つのCheckboxを選択して、もう少し試してみると分かります.
OK、私达は今日この教程の必要なピクチャーを准备しにきて、美工MMに1つの円角のピクチャーを描いてもらうようにしましょう、しかし切らないで、ピクチャーの大きさは大体40です×40でいいです.主にあなたが必要とする最小の大きさによって決め、draw 9 patchにドラッグして、最初の効果を見てみましょう.
 
次に、画像のエッジをクリックして描画し、下の2つのCheckboxをクリックして、終了時の効果を下図のようにします.
この画像を使用すると、左右2つの緑の領域が自動的に上下に伸びますが、上下2つの緑の領域が自動的に左右に伸び、真ん中のピンクの領域が4方向に伸びます.4つの角については、スケールしません.下の黒い線は、コントロールの内容が一番左から一番右に、ほとんど隙間がなく、右の黒い線は、コントロールの内容が上下にそれぞれ空間を残していることを示しています.では、このファイルをfloat_として保存します.panel.9.png、res/drawableディレクトリに保存します.拡張子は9でなければなりません.png、そうでなければ発効しません.また、次回このファイルを編集するとdraw 9 patchツールは黒いエッジを追加しません.
レイアウトファイルの作成
ファイル:res/layout/coner_round_list_activity.xml 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	android:orientation="vertical"
	>
	<TextView
		android:text="Coner Round List View Sample"
		android:layout_width="fill_parent" android:layout_height="wrap_content"
	/>
	<ListView
		android:id="@+id/conerRoundListView"
		android:layout_width="fill_parent" android:layout_height="wrap_content"
		android:paddingTop="10dp" android:paddingBottom="10dp"
		android:layout_margin="10dp"
		android:background="@drawable/float_panel"
		android:layout_weight="1"
		android:cacheColorHint="#FFEDEDED" android:divider="#00EDEDED"
	/>
</LinearLayout>

簡単な説明:layout_marginは、スペースを残して効果を見やすくするため、backgroudは9 patchピクチャを設定するために使用されます.CacheColorHintの色は、私が選択した背景図の色と同じで、スクロール時のitemのベース色が変化しないことを確認できます.Android:dividerは区切り線を制御するために使用されます.ここでは必要ありません.そうしないと、効果が影響を受けます.(この属性を外してみますか?)
Activityクラスの作成
では、このレイアウトファイルを使用するクラスを書きましょう.古いルールでは、API DEMOからCOPYに長いString[]定義があり、ArrayAdapterを使用してデータを表示します.
1
2
3
4
5
6
7
8
9
10
11
12
13
14

public class ConerRoundListActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.coner_round_list_activity);
		ListView arrowList=(ListView) findViewById(R.id.conerRoundListView);
		arrowList.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mStrings));
	}
    private String[] mStrings = {
            "Abbaye de Belloc", "Abbaye du Mont des Cats", "Abertam", "Abondance", "Ackawi",
			...
	};
}

平凡なコードですが、Androidでフィレットを設定するのは簡単なことです.最後に、プログラムを実行する前に、このactivityの追加構成を行い、manifestファイルを開き、このactivityの定義を変更または追加します.
1
2
3

<activity android:name=".conerround.ConerRoundListActivity"  android:label="Coner Round List"
	android:theme="@android:style/Theme.Light"
/>

注意、私はこのactivityのためにthemeがandroidのために持っているThemeを指定しました.ライトは、このthemeの配色が私が選んだ画像と一致しているためです(少なくとも文字の色は黒で、デフォルトのThemeの白であれば、背景図の表示が見えません).
実行しましょう.最終的な効果図は次のとおりです.
まとめ
Style、9-Patch PNG、Background、これらの要素が混在しており、AndroidのUI面で非常に強力な機能を構成しており、しかも簡単で、興味があればソースコードを読むことができ、UI要素の使用をより深く理解することができ、自分できれいなThemeを作って複数のプログラムを使用するのは良いアイデアかもしれません.
 
回転元:http://www.learningandroid.net/blog/advance/9-patch-listview-coner/
Ubuntu下vim構築python環境構成
python装飾器はなぜ2層のネストが必要なのかについても話します.