android開発私の新浪微博クライアント-微博UI編を読む(6.1)
前編ではミニブログリストの機能が完成し、本編では前読みミニブログの機能に続き、本編では主にUI部分の実現について述べ、最終的に実現した効果を上図のように示した.表示ページ全体を上から4つの部分に分け、第1の部分の上部ツールバー、第2の部分の作者の顔と名前、第3の部分のマイクロブログ本文、第4の部分の機能ボタン領域.
新しい名前はViewActivity.JAvaはマイクロブログを読むページとしてres/layoutディレクトリの下にviewという名前を新規作成します.xmlのLayout、コードは以下の通りです.
上記のレイアウトは複雑ではありませんが、主に機能ボタン領域の4つのボタンのクリックアップの切り替え背景の効果を見て、注目ボタンを例にこの行の設定を見て、android:background=「@drawable/lt_selector」、res/drawable-mdpiディレクトリの下でlt_selector.xmlはクリックして画像を切り替える効果を実現するために使用され、具体的なコードは以下の通りである.
本編はlayoutファイルが非常に長いのを見ていますが、実はよく見ると非常に簡単で複雑ではありません.前の経験に基づいて画像やコントロールの表示位置やスタイルをコントロールすればいいのです.本編ではScrolViewコントロールを使っています.これは前に役に立たなかったもので、主に微博の内容が表示領域を超えたときにスクロールバーが現れるのに使いやすいものです.簡単に書いて終わりますので、次の微博を読む機能編に注目してください.
新しい名前はViewActivity.JAvaはマイクロブログを読むページとしてres/layoutディレクトリの下にviewという名前を新規作成します.xmlのLayout、コードは以下の通りです.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="3px">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo_ss">
</ImageView>
<TextView
android:id="@+id/showName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#343434"
android:text=" "
android:textSize="16px">
</TextView>
<ImageButton
android:id="@+id/returnBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/homeBtn"
android:background="@drawable/bnt_return_selector">
</ImageButton>
<ImageButton
android:id="@+id/homeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="12px"
android:background="@drawable/btn_home_selector">
</ImageButton>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/hr">
</LinearLayout>
<RelativeLayout
android:id="@+id/user_bg"
android:layout_width="fill_parent"
android:layout_height="78px"
android:paddingTop="8px"
android:paddingLeft="15px"
android:background="@drawable/u_bg_v">
<ImageView
android:id="@+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="@drawable/usericon">
</ImageView>
<TextView
android:id="@+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/user_icon"
android:layout_marginLeft="10px"
android:layout_marginTop="18px"
android:textColor="#000000">
</TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="5px"
android:layout_marginTop="10px"
android:src="@drawable/sjjt">
</ImageView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="17px"
android:paddingRight="17px"
android:paddingBottom="5px"
android:layout_above="@+id/menu_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="15px">
</TextView>
<ImageView
android:id="@+id/pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="@+id/loadingLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
android:layout_centerInParent="true">
<ProgressBar
android:id="@+id/loading"
android:layout_width="31px"
android:layout_height="31px"
android:layout_gravity="center"
style="@style/progressStyle">
</ProgressBar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textSize="12px"
android:textColor="#9c9c9c"
android:layout_gravity="center"
android:layout_below="@+id/loading">
</TextView>
</LinearLayout>
<TableLayout
android:id="@+id/menu_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5px">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:id="@+id/btn_gz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#3882b8"
android:textSize="15px"
android:text=" (1231)"
android:background="@drawable/lt_selector">
</Button>
<Button
android:id="@+id/btn_pl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#3882b8"
android:textSize="15px"
android:text=" (31)"
android:background="@drawable/rt_selector">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#3882b8"
android:textSize="15px"
android:layout_gravity="left"
android:text=" "
android:background="@drawable/lb_selector">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#3882b8"
android:textSize="15px"
android:text=" "
android:background="@drawable/rb_selector">
</Button>
</TableRow>
</TableLayout>
</RelativeLayout>
</LinearLayout>
上記のレイアウトは複雑ではありませんが、主に機能ボタン領域の4つのボタンのクリックアップの切り替え背景の効果を見て、注目ボタンを例にこの行の設定を見て、android:background=「@drawable/lt_selector」、res/drawable-mdpiディレクトリの下でlt_selector.xmlはクリックして画像を切り替える効果を実現するために使用され、具体的なコードは以下の通りである.
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tbtn_1" />
<item android:state_pressed="true" android:drawable="@drawable/tbtn_h_1" />
</selector>
本編はlayoutファイルが非常に長いのを見ていますが、実はよく見ると非常に簡単で複雑ではありません.前の経験に基づいて画像やコントロールの表示位置やスタイルをコントロールすればいいのです.本編ではScrolViewコントロールを使っています.これは前に役に立たなかったもので、主に微博の内容が表示領域を超えたときにスクロールバーが現れるのに使いやすいものです.簡単に書いて終わりますので、次の微博を読む機能編に注目してください.