android开发实例之minitwitter登录界面 代码,Android实例miniTwitter登录界面
先上效果圖:
布局分析:分成三個部分,該Activity是一個無標題的,設置無標題需要在setContentView之前設置,否則會報錯:
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.login);
第一部分是一個帶漸變色背景的LinearLayout布局,關于背景漸變色請參照android小技巧:android背景漸變色(shape,gradient),
這里就不再貼上代碼了,效果如下圖所示
第二部分,紅色線區域內,包括1,2,3,4如圖所示:
紅色的1表示的是一個帶圓角且背景色為#55FFFFFF(淡藍色)的RelativeLayout布局,代碼如下:
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
solid表示填充色,這里填充的是淡藍色。corners是設置圓角。
dp(即dip,deviceindependentpixels)設備獨立像素:這個和設備硬件有關,一般我們為了支持WVGA、HVGA和QVGA,不依賴像素。在android上開發的程序將會在不同分辨率的手機上運行。為了讓程序外觀不至于相差太大,所以引入了dip的概念。比如定義一個矩形10x10dip.在分辨率為160dpi的屏上,比如G1,正好是10x10像素。而在240dpi的屏,則是15x15像素.換算公式為pixs=dips*(density/160).density就是屏的分辨率。
然后RelativeLayou的background引用此drawable,具體RelativeLayout設置如下:
android:id="@+id/login_div"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="15dip"
android:layout_margin="15dip"
android:background="@drawable/background_login_div_bg"
>
padding是指內邊距(也就是指內容與邊框的距離),layout_margin為外邊距(它的上一層與邊框的距離)。
接下來是區域2,為賬號的文本和輸入框,首先是賬號的文本,代碼如下:
android:id="@+id/login_user_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
android:text="@string/login_label_username"
style="@style/normalText"/>
android:layout_alignParentTop這里表示此TextView的位置處于頂部
android:layout_marginTop="5dp"這里表示此TextView的邊框與RelativeLayout的頂部邊框距離有5dp
這里需要對這個TextView設置下字體顏色和字體大小,定義在res/style.xml里面
#444
14sp
定義賬號的輸入框,如下
android:id="@+id/username_edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/login_username_hint"
android:layout_below="@id/login_user_input"
android:singleLine="true"
android:inputType="text"/>
android:hint輸入框里面的提示文字,
android:layout_below這里是設置為在賬號的文本框的下面,
android:singleLine為單行輸入(即你輸入回車的時候不會在換行了)
android:inputType這里text表示輸入的類型為文本
區域3是密碼文本和輸入框,同區域2,代碼如下:
android:id="@+id/login_password_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/username_edit"
android:layout_marginTop="3dp"
android:text="@string/login_label_password"
style="@style/normalText"/>
android:id="@+id/password_edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_password_input"
android:password="true"
android:singleLine="true"
android:inputType="textPassword"
/>
區域4,登錄按鈕
android:id="@+id/signin_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/password_edit"
android:layout_alignRight="@id/password_edit"
android:text="@string/login_label_signin"
android:background="@drawable/blue_button"
/>
第三部分:底下的文字和兩張圖片,分別標記了1,2,3,4
區域1:還是一個RelativeLayout,但這里設置的很簡單,代碼如下:
android:layout_width="fill_parent"
android:layout_height="wrap_content">
區域2:"沒有賬號?注冊"這幾個文字定義在string里面,包含了一個標簽,
沒有帳號? 注冊
定義如下:
android:text="@string/login_register_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textColor="#888"
android:textColorLink="#FF0066CC"
/>
TextView是支持簡單的html標簽的,如標簽,但并不是支持所有標簽,支持更復雜的html標簽得用webView組件。
android:textColorLink是設置文字聯機的顏色,雖然TextView支持標簽,但是這里不能點擊此鏈接,不要被假象所迷惑。
區域3是一直貓的卡通圖片,貌似有點丑,將就下吧,
android:layout_alignParentRight="true"位于layout的最右邊
android:layout_alignParentBottom="true"位于layout的最底部
android:layout_marginRight="25dp"該imageView的邊框距離layout邊框有25dp,其他的margin類似。
區域4是一個帶文字的圖片的ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/miniTwitter_logo"
android:layout_alignBottom="@id/miniTwitter_logo"
android:paddingBottom="8dp"
/>
android:layout_toLeftOf="@id/miniTwitter_logo"在那個小貓ImageView的左邊(水平位置)
android:layout_alignBottom="@id/miniTwitter_logo"這里意思是這兩個ImageView(區域3和區域4)下邊緣對齊
android:paddingBottom="8dp"圖片距離ImageView底部邊框8dp,也就是將圖片上抬個8dp
總結
以上是生活随笔為你收集整理的android开发实例之minitwitter登录界面 代码,Android实例miniTwitter登录界面的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 冰糖泡水的功效与作用、禁忌和食用方法
- 下一篇: android流程化步骤样式,Andro