自學(xué)Android第六天——UI開發(fā)

<TextView(文本框)

textStyle:設(shè)置字體風(fēng)格,三個可選值:nomal(無效果),bold(加粗),italic(斜體);

gravity:來指定文字對齊方式,可選值有top、bottom、left、rightcenter(效果等同于center_vertical | center_horizontal,即水平和垂直方向都居中)等,可以用 | 來同時指定多個值。

layout_widthlayout_height:組件的寬度和高度,一般寫:wrap_content或者match_parent(fill_parent),前者是控件顯示的內(nèi)容多大,控件就多大,而后者會填滿該控件所在的父容器,其中match_parentfill_partent意義相同,但官方更加推薦使用match_parent;

帶邊框的TextView(EditText的用法也一樣)

首先在drawable里面創(chuàng)建一個xml文件。例如,選drawable——>new——>drawable resource flie,然后編輯名字all_background。代碼如下(可以根據(jù)實際情況更改):

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

? ? <!-- 設(shè)置透明背景色 -->

? ? <solid android:color="#87CEEB" />

? ? <!-- 設(shè)置一個黑色邊框 -->

? ? <stroke

? ? ? ? android:width="2px"

? ? ? ? android:color="#000000" />

? ? <!-- 設(shè)置四個圓角的半徑 -->

? ? <corners

? ? ? ? android:bottomLeftRadius="10px"

? ? ? ? android:bottomRightRadius="10px"

? ? ? ? android:topLeftRadius="10px"

? ? ? ? android:topRightRadius="10px" />

? ? <!-- 設(shè)置一下邊距,讓空間大一點 -->

? ? <padding

? ? ? ? android:bottom="5dp"

? ? ? ? android:left="5dp"

? ? ? ? android:right="5dp"

? ? ? ? android:top="5dp" />

</shape>

然后我們在TextView或者在EditText中添加上面的資源文件。例如:android:background="@drawable/edit_background"。

接下來我們就可以run(運(yùn)行)啦,看看效果怎么樣。

帶圖片的TextView(EditText用法也一樣)

要實現(xiàn)帶圖片的TextView效果,可能我們的想法有:一個ImageView用于顯示圖片 +

一個TextView用于顯示文字,然后把他們丟到一個LinearLayout中,效果是可以實現(xiàn),但是會不會有點繁瑣呢?首先我們要知道布局層次越少,性能也就越好!

不過我們可以設(shè)置四個方向的圖片:drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右) 另外,你也可以使用drawablePadding來設(shè)置圖片與文字間的間距!

TextView的內(nèi)容就到這啦,如果有沒提到的或者不懂的可以百度。接下來就是EditText啦。

EditText(編輯框)

hint:細(xì)心的你可能會注意到一些比較人性化的軟件會在編輯框里會有一些提示性的文字,用戶輸入了內(nèi)容這些提示性的文字就會消失。沒錯,它就是hint,用法和text一樣,在后面輸入提示語句,例如:android:hint="用戶名"。

maxLines:解決輸入內(nèi)容過多,EditText會不斷被拉長,變得難看。我們可以使用maxLines來解決這個問題。例如android:maxLines="2"指定了EditText的最大行數(shù),當(dāng)內(nèi)容超過了兩行時,文本就會向上滾動,而EditText則不會被繼續(xù)拉伸。

selectAllOnFocus:當(dāng)我們點擊想當(dāng)我們的輸入框獲得焦點后,不是將光標(biāo)移動到文本的開始或者結(jié)尾;而是獲取到輸入框中所有的文本內(nèi)容的話!這個時候我們可以使用selectAllOnFocus屬性。例如android:selectAllOnFocus="true"。

capitalize:設(shè)置英文字母大寫類型的屬性:android:capitalize默認(rèn)none,提供了三個可選值:sentences:(僅第一個字母大寫),words:(每一個單詞首字母大小用空格區(qū)分單詞),characters:(每一個英文字母都大寫)。

。。。。。。

還有很多很多內(nèi)容沒提及到,如果要學(xué)就自己查閱資料吧。

Button(按鈕)

textAllCaps:如果你的按鈕是英文單詞的話,這時就需要用android:textAllCaps屬性來禁用系統(tǒng)會默認(rèn)的將所有的字母轉(zhuǎn)換成大寫的。例如android:textAllCaps="false"。

還有一些函數(shù)方法,都不是太難,如果需要的話,可以自己查閱資料總結(jié)歸納。

ImageView(圖片視圖)

src屬性和background屬性的區(qū)別:在API文檔中我們發(fā)現(xiàn)ImageView有兩個可以設(shè)置圖片的屬性,分別是:src和background。常識:

①background通常指的都是背景,而src指的是內(nèi)容!!

②當(dāng)使用src填入圖片時,是按照圖片大小直接填充,并不會進(jìn)行拉伸,而使用background填入圖片,則是會根據(jù)ImageView給定的寬度來進(jìn)行拉伸。

adjustViewBounds:用于設(shè)置縮放是否保存原圖長寬比。ImageView為我們提供了adjustViewBounds屬性,用于設(shè)置縮放時是否保持原圖長寬比!單獨設(shè)置不起作用,需要配合maxWidthmaxHeight屬性一起使用!而后面這兩個屬性 也是需要adjustViewBounds為true才會生效的~android:maxHeight:設(shè)置ImageView的最大高度,android:maxWidth:設(shè)置ImageView的最大寬度。也就是兩者缺一不可。

我們也可以定義圓形或者圓角ImageView。就像QQ頭像一樣。由于對我這樣的小白有些復(fù)雜,所以就只提一下,有興趣的可以去網(wǎng)上找找,然后自己去試試。這樣能很快的熟悉。

ProgressBar(進(jìn)度條)

progressBar用于界面顯示一個進(jìn)度條,表示我們的程序正在加載數(shù)據(jù)。它的用法非常簡單。先在Activity里添加如下代碼:

public class CirclePgBar extends View {

? ? private Paint mBackPaint;

? ? private Paint mFrontPaint;

? ? private Paint mTextPaint;

? ? private float mStrokeWidth = 50;

? ? private float mHalfStrokeWidth = mStrokeWidth / 2;

? ? private float mRadius = 200;

? ? private RectF mRect;

? ? private int mProgress = 0;

? ? //目標(biāo)值,想改多少就改多少? ? private int mTargetProgress = 90;

? ? private int mMax = 100;

? ? private int mWidth;

? ? private int mHeight;

? ? public CirclePgBar(Context context) {

? ? ? ? super(context);

? ? ? ? init();

? ? }

? ? public CirclePgBar(Context context, AttributeSet attrs) {

? ? ? ? super(context, attrs);

? ? ? ? init();

? ? }

? ? public CirclePgBar(Context context, AttributeSet attrs, int defStyleAttr) {

? ? ? ? super(context, attrs, defStyleAttr);

? ? ? ? init();

? ? }

? ? //完成相關(guān)參數(shù)初始化? ? private void init() {

? ? ? ? mBackPaint = new Paint();

? ? ? ? mBackPaint.setColor(Color.WHITE);

? ? ? ? mBackPaint.setAntiAlias(true);

? ? ? ? mBackPaint.setStyle(Paint.Style.STROKE);

? ? ? ? mBackPaint.setStrokeWidth(mStrokeWidth);

? ? ? ? mFrontPaint = new Paint();

? ? ? ? mFrontPaint.setColor(Color.GREEN);

? ? ? ? mFrontPaint.setAntiAlias(true);

? ? ? ? mFrontPaint.setStyle(Paint.Style.STROKE);

? ? ? ? mFrontPaint.setStrokeWidth(mStrokeWidth);

? ? ? ? mTextPaint = new Paint();

? ? ? ? mTextPaint.setColor(Color.GREEN);

? ? ? ? mTextPaint.setAntiAlias(true);

? ? ? ? mTextPaint.setTextSize(80);

? ? ? ? mTextPaint.setTextAlign(Paint.Align.CENTER);

? ? }

? ? //重寫測量大小的onMeasure方法和繪制View的核心方法onDraw()? ? @Override? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

? ? ? ? super.onMeasure(widthMeasureSpec, heightMeasureSpec);

? ? ? ? mWidth = getRealSize(widthMeasureSpec);

? ? ? ? mHeight = getRealSize(heightMeasureSpec);

? ? ? ? setMeasuredDimension(mWidth, mHeight);

? ? }

? ? @Override? ? protected void onDraw(Canvas canvas) {

? ? ? ? initRect();

? ? ? ? float angle = mProgress / (float) mMax * 360;

? ? ? ? canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);

? ? ? ? canvas.drawArc(mRect, -90, angle, false, mFrontPaint);

? ? ? ? canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight / 2 + mHalfStrokeWidth, mTextPaint);

? ? ? ? if (mProgress < mTargetProgress) {

? ? ? ? ? ? mProgress += 1;

? ? ? ? ? ? invalidate();

? ? ? ? }

? ? }

? ? public int getRealSize(int measureSpec) {

? ? ? ? int result = 1;

? ? ? ? int mode = MeasureSpec.getMode(measureSpec);

? ? ? ? int size = MeasureSpec.getSize(measureSpec);

? ? ? ? if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {

? ? ? ? ? ? //自己計算? ? ? ? ? ? result = (int) (mRadius * 2 + mStrokeWidth);

? ? ? ? } else {

? ? ? ? ? ? result = size;

? ? ? ? }

? ? ? ? return result;

? ? }

? ? private void initRect() {

? ? ? ? if (mRect == null) {

? ? ? ? ? ? mRect = new RectF();

? ? ? ? ? ? int viewSize = (int) (mRadius * 2);

? ? ? ? ? ? int left = (mWidth - viewSize) / 2;

? ? ? ? ? ? int top = (mHeight - viewSize) / 2;

? ? ? ? ? ? int right = left + viewSize;

? ? ? ? ? ? int bottom = top + viewSize;

? ? ? ? ? ? mRect.set(left, top, right, bottom);

? ? ? ? }

? ? }

}

然后在xml文件里添加如下代碼:

<com.jay.progressbardemo.CirclePgBar?

?android:layout_width="match_parent"?

?android:layout_height="match_parent"/>

好啦,接下來就可以開始運(yùn)行一下,看看效果吧。

ProressDialog(對話框進(jìn)度條)

除了上面的還有一種顯示在對話框上面的進(jìn)度條。ProressDialog會在對話框中顯示一個進(jìn)度條,一般用于表示當(dāng)前操作比較耗時,讓用戶耐心等待。Activity中的代碼如下所示:

public class MainActivityextends AppCompatActivityimplements View.OnClickListener {

? ? private ProgressBar pro_1;

? ? @Override

? ? protected void onCreate(Bundle savedInstanceState) {

????????super.onCreate(savedInstanceState);

? ? ? ? setContentView(R.layout.activity_main);

? ? ? ? Button but_1=(Button)findViewById(R.id.but_1);

? ? ? ? pro_1=(ProgressBar)findViewById(R.id.pro_1);

? ? ? ? but_1.setOnClickListener(this);

? ? }

????//實現(xiàn)接口的方式來注冊

? ? @Override

? ? public void onClick(View v) {

????????switch (v.getId()){

? ? ? ? ? ? case R.id.but_1:

????????????????ProgressDialog progressdialog=new ProgressDialog(MainActivity.this);

? ? ? ? ? ? ? ? progressdialog.setTitle("This is ProgressDialog");

? ? ? ? ? ? ? ? progressdialog.setMessage("Loading...");

? ? ? ? ? ? ? ? progressdialog.setCancelable(true);

? ? ? ? ? ? ? ? progressdialog.show();

break;

? ? ? ? ? ? default:

break;

? ? ? ? }

????}

}

xml里面的代碼如下:

? ? <android:layout_width="match_parent"

? ? android:layout_height="wrap_content"

? ? android:id="@+id/pro_1"

? ? style="?android:attr/progressBarStyleHorizontal"

? ? android:max="100"/>

? ? <android:layout_width="match_parent"

? ? android:layout_height="wrap_content"

? ? android:id="@+id/but_1"

? ? android:text="進(jìn)度條對話框"

? ? android:textAllCaps="false"/>

ProgressDialog圖

注意,如果在setCancelable()中傳入false,表示ProgressDialog是不能通過Back鍵取消掉,這時你要在代碼中做好控制,當(dāng)數(shù)據(jù)加載完成后必須要調(diào)用ProgressDialog的dismiss()方法來關(guān)閉對話框,否則ProgressDialog,否則ProgressDialog將會一直存在。

AlertDialog(對話框)

alertDialog在當(dāng)前界面彈出一個對話框,這個對話框置頂于所有界面元素之上的。能夠屏蔽其他控件的交互能力,因此AlertDialog一般都是用于提示一些非常重要的內(nèi)容或者警告信息。讓我們來學(xué)習(xí)一下。activity中的代碼如下:

public class MainActivityextends AppCompatActivityimplements View.OnClickListener {

? ? @Override

? ? protected void onCreate(Bundle savedInstanceState) {

????????super.onCreate(savedInstanceState);

? ? ? ? setContentView(R.layout.activity_main);

? ? ? ? Button but_1=(Button)findViewById(R.id.but_1);

? ? ? ? but_1.setOnClickListener(this);

//實現(xiàn)接口的方式來注冊

@Override

public void onClick(View v) {

switch (v.getId()){

????//對話框

????case R.id.but_4:

????????AlertDialog.Builder dialog=new AlertDialog.Builder(MainActivity.this);

? ? ????dialog.setTitle("This is Dialog");

? ? ????dialog.setMessage("something important");

? ? ????dialog.setCancelable(false);

? ????? dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {

????????????@Override

? ? ? ????? public void onClick(DialogInterface dialog, int which) {

????????????}

????????});

? ? ????dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

????????????@Override

? ? ? ? ????public void onClick(DialogInterface dialog, int which) {

????????????}

????????});

? ? ? ? dialog.show();

? ? ? ? break;

????default:

????????break;

? ? ? ? }

????}

}

xml中的代碼如下:

? ? <android:layout_width="match_parent"

? ? android:layout_height="wrap_content"

? ? android:id="@+id/but_4"

? ? android:text="對話框"

? ? android:textAllCaps="false"/>

對話框例圖

RatingBar(星級評分條)

常用的xml屬性;

android:isIndicator:RatingBar是否是一個指示器(用戶無法進(jìn)行更改)。

android:numStars:顯示的星星數(shù)量,必須是一個整型值,如“100”。

android:rating:默認(rèn)的評分,必須是浮點類型,像“1.2”。

android:stepSize:評分的步長,必須是浮點類型,像“1.2”。

常用的方法:

監(jiān)聽方法:setOnRatingBarChangelistener?

監(jiān)聽器:RatingBar.OnRatingBarChangeListener

先在活動對應(yīng)的xml文件里添加如下代碼:

<RatingBar?

?android:id="@+id/rb_normal"?

?style="@style/roomRatingBar"

?android:layout_width="wrap_content"

?android:layout_height="wrap_content" />

然后在activity里添加如下代碼:

public class MainActivity extends AppCompatActivity {?

?????private RatingBar rb_normal;?

?????????@Override?

?????????protected void onCreate(Bundle savedInstanceState) {?

?????????????super.onCreate(savedInstanceState);

?????????????setContentView(R.layout.activity_main);

? ? ? ? ? ? ?rb_normal = (RatingBar) findViewById(R.id.rb_normal); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?rb_normal.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {?

?????????????????@Override?

?????????????????public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) { ????????????????????Toast.makeText(MainActivity.this, "rating:" + String.valueOf(rating), Toast.LENGTH_LONG).show();?

?????????????????????}?

? ? ? ? ? ? ?});?

? ? ? }

}

和前面的SeekBar布局一樣編寫一個layer-list.xml的文件:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

?????<item android:id="@android:id/background" android:drawable="@mipmap/ic_rating_off1" />?

?????<item android:id="@android:id/secondaryProgress" android:drawable="@mipmap/ic_rating_off1" />?

?????<item android:id="@android:id/progress" android:drawable="@mipmap/ic_rating_on1" />

</layer-list>

最后在style.xml中自定義下RatingBar Style,在style.xml加上這個:

<style name="roomRatingBar" parent="@android:style/Widget.RatingBar">? ?

????<item name="android:progressDrawable">@drawable/ratingbar_full</item>

????<item name="android:minHeight">24dip</item>

????<item name="android:maxHeight">24dip</item>

</style>

好啦,今天學(xué)了這么多,好好消化一下吧。貪多不爛,溫故知新的道理都懂吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容