android登錄界面,android登錄界面布局
android怎么做動(dòng)態(tài)的登陸界面
設(shè)計(jì)android的登錄界面的方法：
讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、文登網(wǎng)站維護(hù)、網(wǎng)站推廣。
UI實(shí)現(xiàn)的代碼如下：
1、背景設(shè)置圖片：
background_login.xml
?xml?version="1.0"?encoding="utf-8"?
shape?xmlns:android=""??
gradient
android:startColor="#FFACDAE5"
android:endColor="#FF72CAE1"
android:angle="45"
/
/shape
2、圓角白框
效果圖上面的并不是白框，其實(shí)框是白色的，只是設(shè)置了透明值，也是靠一個(gè)xml文件實(shí)現(xiàn)的。
background_login_div.xml
?xml?version="1.0"?encoding="UTF-8"?
shape?xmlns:android=""??
solid?android:color="#55FFFFFF"?/
!--?設(shè)置圓角
注意：?bottomRightRadius是左下角而不是右下角??bottomLeftRadius右下角--
corners?android:topLeftRadius="10dp"?android:topRightRadius="10dp"
android:bottomRightRadius="10dp"?android:bottomLeftRadius="10dp"/
/shape
3、界面布局：
login.xml
?xml?version="1.0"?encoding="utf-8"?
LinearLayout
xmlns:android=""??
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_login"
!--?padding?內(nèi)邊距???layout_margin?外邊距
android:layout_alignParentTop?布局的位置是否處于頂部?--
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"?
!--?賬號(hào)?--
TextView
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"/
EditText
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"/
!--?密碼?text?--
TextView
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"/
EditText
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"?/
!--?登錄button?--
Button
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"?/
/RelativeLayout
RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"?
TextView??android:id="@+id/register_link"
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"?/
ImageView?android:id="@+id/miniTwitter_logo"
android:src="@drawable/cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="25dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="25dp"?/
ImageView?android:src="@drawable/logo"
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"/
/RelativeLayout
/LinearLayout
4、java源代碼，Java源文件比較簡(jiǎn)單，只是實(shí)例化Activity，去掉標(biāo)題欄。
package?com.mytwitter.acitivity;
import?android.app.Activity;
import?android.os.Bundle;
import?android.view.Window;
public?class?LoginActivity?extends?Activity?{
@Override
public?void?onCreate(Bundle?savedInstanceState)?{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.login);
}
}
5、實(shí)現(xiàn)效果如下：
App登錄界面----布局篇
?我自學(xué)了3個(gè)月的Android基礎(chǔ)，居然一個(gè)App都做不出來(lái)。在我之前學(xué)的同時(shí)居然忘記了之前學(xué)的內(nèi)容。所以我現(xiàn)在重新開(kāi)始復(fù)習(xí)，這篇文章將是我復(fù)習(xí)的開(kāi)始也是基礎(chǔ)的穩(wěn)固，同時(shí)也是將來(lái)記不得了可以自我回顧的筆記。首先是從App登錄開(kāi)始。
? ?首先第一是布局，登錄界面布局那就要用到控件，登錄界面所需控件如下：
1.姓名 ? ? 輸入框 ? 密碼 輸入框：就要有Textview文本控件 X 2， Editview輸入文本框控件 X 2
2.立即注冊(cè) ?忘記密碼 登錄 ：就要有Button控件 X 3
既然要布局就要有布局控件：可以用RelativeLayout相對(duì)布局，LinearLayout線(xiàn)性布局，TableLayout表格布局，F(xiàn)rameLayout幀布局，AbsoluteLayout絕對(duì)布局。我要選用就就是前兩個(gè)布局：RelativeLayout相對(duì)布局或者LinearLayout線(xiàn)性布局。
這就是我最終預(yù)想所要達(dá)到的效果：
首先打開(kāi)布局文件：展開(kāi)app---res---layout---activity_main.xml
切換到設(shè)計(jì)模式Design:
然后從調(diào)色板Palette就是控件庫(kù)拖拽出所需控件:
2個(gè)Textview,2個(gè)Editview ,3個(gè)Button.一開(kāi)始布局控件就是相對(duì)布局控件，RelativeLayout相對(duì)布局控件允許通過(guò)指定顯示對(duì)象相對(duì)于父容器或其他兄弟控件的相對(duì)位置結(jié)合margin，padding來(lái)進(jìn)行布局。
然后我們?cè)偾袚Q回文本模式Text:
TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/這就組成了一個(gè)控件。
再來(lái)解釋解釋RelativeLayout相對(duì)布局控件是啥意思：
上圖所表現(xiàn)的意思就是RelativeLayout相對(duì)布局控件的特點(diǎn)：TextView文本控件基于父容器（RelativeLayout相對(duì)布局控件）之下，再看圖：
它會(huì)自動(dòng)添加默認(rèn)屬性：android:text="文本控件"http://這是文本屬性可以輸入文字
android:textSize="50dp"http://這是文本大小屬性是控制text屬性的大小
android:layout_width="wrap_content"http://這是寬，選擇的自適應(yīng)屏幕
android:layout_height="wrap_content"這是高。
android:layout_marginTop="253dp"http:// 重點(diǎn)就在這里了：在RelativeLayout相對(duì)布局下拖出的控件會(huì)有這條屬性，意思是TextView相距父容器253dp的距離
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
好了我們繼續(xù)：我寫(xiě)的這個(gè)布局呢？只用了兩個(gè)EditView控件和三個(gè)Button控件。先說(shuō)EditView控件。
拖拽出來(lái)改好了各種屬性但是和我的不一樣，哪里不一樣？有邊框，邊框還是圓角。怎么弄的？這是改變了它的樣式。首先目錄找到drawable文件按下Alt+lns鍵，點(diǎn)擊Drawable resource file
那就會(huì)彈出下面這個(gè)框框好創(chuàng)建資源文件，F(xiàn)ile name:這是資源文件的名字，Root element:這是需要?jiǎng)?chuàng)建什么類(lèi)型的資源文件。
假如沒(méi)有出現(xiàn)這個(gè)對(duì)話(huà)框而是另外的對(duì)話(huà)框就請(qǐng)更換模式
將Android 目錄模式切換成Project目錄模式
找到drawable文件重復(fù)上面操作就會(huì)出現(xiàn)
名字就自己取吧，類(lèi)型選擇shape文件
這就是我為EditView設(shè)置的資源文件，那么怎么加載它呢？
用背景background屬性來(lái)加載：@drawable/border用@選擇文件位置加載就成功了。
文本框就做好了。噢?。?！等等還有個(gè)屬性android:hint="登錄"還沒(méi)介紹，這是提示語(yǔ)：比如請(qǐng)輸入用戶(hù)名，請(qǐng)輸入密碼，這樣的提示語(yǔ)，只起到提示作用。范例：android:hint="請(qǐng)輸入用戶(hù)名"
好吧依次類(lèi)推，Button按鈕也是這樣。我們先來(lái)看忘記密碼，立即注冊(cè)兩控件這兩我沒(méi)這樣加載資源文件，我只用了3條屬性，
android:background="@null"http://這條意思是背景設(shè)置路徑為空，作用是消除邊框。
android:shadowColor="#338AFF"http://改變按鈕背景顏色，讓它看起來(lái)和相對(duì)布局背景融為一體。
android:textColor="#0066CC"http://改變文字顏色
怎么樣是不是和QQ登錄界面的差不多
那再來(lái)看立即登錄按鈕，這個(gè)按鈕我用了三個(gè)資源文件，為了讓按鈕按下抬起有一個(gè)變色效果，能夠反饋用戶(hù)視覺(jué)：您已按下按鈕。
首先看按下的資源文件：
這是按下的模樣，radius是設(shè)置圓角，然后是按下后的顏色。
再來(lái)看抬起：
這是抬起時(shí)候的樣子，圓角按下抬起都要設(shè)置一樣，不然按下是一個(gè)樣，抬起又是另一個(gè)樣子，然后是抬起的顏色。
這是兩個(gè)資源文件，如何讓按鈕呈現(xiàn)出按下抬起的不同效果呢？
就需要另一個(gè)資源文件來(lái)操控：selector資源文件
由他來(lái)控制這兩個(gè)資源文件：
item/這是資源文件的標(biāo)簽，包括shape資源文件的：corners/solid/都是標(biāo)簽
標(biāo)簽item/里面
android:drawable="@drawable/clickroundedcolor"http://是加載按下資源文件，
android:state_pressed="true"http://true就是對(duì)，就是一個(gè)判斷作用，判斷是否按下，按下就加載按下的資源文件
然后再一個(gè)子標(biāo)簽item/
item android:drawable="@drawable/roundedcolor"/也就是說(shuō)當(dāng)上面pressed不為true的時(shí)候執(zhí)行下面這個(gè)標(biāo)簽加載抬起狀態(tài)的效果。
這就做成了按下深藍(lán)抬起淺藍(lán)的顏色效果。那今天就到這里，復(fù)習(xí)到了什么Editview Button控件的使用然后在原來(lái)的基礎(chǔ)上學(xué)到了EditView 和Button控件的UI設(shè)計(jì)一些細(xì)節(jié)效果。
還熟悉了Android studio。之前用Eclipse學(xué)習(xí)的Android,現(xiàn)在改用AS還特別不習(xí)慣，希望復(fù)習(xí)后我會(huì)熟練Android studio。恩，還有看到忘記密碼，立即注冊(cè)兩個(gè)按鈕是不是還會(huì)聯(lián)想到還有兩個(gè)布局。沒(méi)錯(cuò)，忘記密碼和立即注冊(cè)這兩個(gè)布局文件，就不用記錄了，相信會(huì)了登錄主界面布局，其他兩個(gè)不在話(huà)下。
如何設(shè)計(jì)android的登錄界面
在網(wǎng)上在到一個(gè)登錄界面感覺(jué)挺不錯(cuò)的，給大家分享一下~先看效果圖：
這個(gè)Demo除了按鈕、小貓和Logo是圖片素材之外，其余的UI都是通過(guò)代碼實(shí)現(xiàn)的。
?
一、背景
背景藍(lán)色漸變，是通過(guò)一個(gè)xml文件來(lái)設(shè)置的。代碼如下：
background_login.xml
?xml version="1.0" encoding="utf-8"?
shape xmlns:andro
gradient
android:startColor="#FFACDAE5"
android:endColor="#FF72CAE1"
android:angle="45"
/
/shape
startColor是漸變開(kāi)始的顏色值，endColor是漸變結(jié)束的顏色值，angle是漸變的角度。其中#FFACDAE5中，F(xiàn)F是Alpha值，AC是RGB的R值，DA是RGB的G值，E5是RGB的B值，每個(gè)值在00~FF取值，即透明度、紅、綠、藍(lán)有0~255的分值，像要設(shè)置具體的顏色，可以在PS上的取色器上查看設(shè)置。
?
?
二、圓角白框
效果圖上面的并不是白框，其實(shí)框是白色的，只是設(shè)置了透明值，也是靠一個(gè)xml文件實(shí)現(xiàn)的。
background_login_div.xml
?xml version="1.0" encoding="UTF-8"?
shape xmlns:andro
solid android:color="#55FFFFFF" /
!-- 設(shè)置圓角
注意： bottomRightRadius是左下角而不是右下角 ?bottomLeftRadius右下角--
corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/
/shape
?
三、界面的布局
界面的布局挺簡(jiǎn)單的，就直接貼代碼啦~
login.xml
?xml version="1.0" encoding="utf-8"?
LinearLayout
xmlns:andro
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_login"
!-- padding 內(nèi)邊距 ? layout_margin 外邊距
android:layout_alignParentTop 布局的位置是否處于頂部 --
RelativeLayout
? ?android:
? ?android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="15dip" ? ? ? ?
? android:layout_margin="15dip"
? android:background="@drawable/background_login_div_bg"
!-- 賬號(hào) --
? TextView
? android:
? android:layout_width="wrap_content"
? android:layout_height="wrap_content"
? android:layout_alignParentTop="true"
? android:layout_marginTop="5dp"
? android:text="@string/login_label_username"
? /
? EditText
? android:
? 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"/
? ?!-- 密碼 text --
? ?TextView
? ? android:
? ? 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"
? ? /
? ?EditText
? ? android:
? ? 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" /
? ?!-- 登錄button --
? ?Button
? ? android:
? ? 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" /
/RelativeLayout
RelativeLayout
? android:layout_width="fill_parent"
? android:layout_height="wrap_content"
TextView ?android:
? ? 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" /
ImageView android:
? ?android:src="@drawable/cat"
? ?android:layout_width="wrap_content"
? ?android:layout_height="wrap_content"
? ?android:layout_alignParentRight="true"
? ?android:layout_alignParentBottom="true"
? ?android:layout_marginRight="25dp"
? ?android:layout_marginLeft="10dp"
? ?android:layout_marginBottom="25dp" /
ImageView android:src="@drawable/logo"
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"/
/RelativeLayout
/LinearLayout
標(biāo)題名稱(chēng)：android登錄界面,android登錄界面布局
轉(zhuǎn)載來(lái)于：http://m.jiaotiyi.com/article/dsdsish.html