自学Android第六天——UI开发

<TextView(文本框)

textStyle:设置字体风格,三个可选值:nomal(无效果),bold(加粗),italic(斜体);

gravity:来指定文字对齐方式,可选值有topbottomleftrightcenter(效果等同于center_vertical | center_horizontal,即水平和垂直方向都居中)等,可以用 | 来同时指定多个值。

layout_widthlayout_height:组件的宽度和高度,一般写:wrap_content或者match_parent(fill_parent),前者是控件显示的内容多大,控件就多大,而后者会填满该控件所在的父容器,其中match_parentfill_partent意义相同,但官方更加推荐使用match_parent

带边框的TextView(EditText的用法也一样)

首先在drawable里面创建一个xml文件。例如,选drawable——>new——>drawable resource flie,然后编辑名字all_background。代码如下(可以根据实际情况更改):

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

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

    <!-- 设置透明背景色 -->

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

    <!-- 设置一个黑色边框 -->

    <stroke

        android:width="2px"

        android:color="#000000" />

    <!-- 设置四个圆角的半径 -->

    <corners

        android:bottomLeftRadius="10px"

        android:bottomRightRadius="10px"

        android:topLeftRadius="10px"

        android:topRightRadius="10px" />

    <!-- 设置一下边距,让空间大一点 -->

    <padding

        android:bottom="5dp"

        android:left="5dp"

        android:right="5dp"

        android:top="5dp" />

</shape>

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

接下来我们就可以run(运行)啦,看看效果怎么样。

带图片的TextView(EditText用法也一样)

要实现带图片的TextView效果,可能我们的想法有:一个ImageView用于显示图片 +

一个TextView用于显示文字,然后把他们丢到一个LinearLayout中,效果是可以实现,但是会不会有点繁琐呢?首先我们要知道布局层次越少,性能也就越好!

不过我们可以设置四个方向的图片:drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右) 另外,你也可以使用drawablePadding来设置图片与文字间的间距!

TextView的内容就到这啦,如果有没提到的或者不懂的可以百度。接下来就是EditText啦。

EditText(编辑框)

hint:细心的你可能会注意到一些比较人性化的软件会在编辑框里会有一些提示性的文字,用户输入了内容这些提示性的文字就会消失。没错,它就是hint,用法和text一样,在后面输入提示语句,例如:android:hint="用户名"。

maxLines:解决输入内容过多,EditText会不断被拉长,变得难看。我们可以使用maxLines来解决这个问题。例如android:maxLines="2"指定了EditText的最大行数,当内容超过了两行时,文本就会向上滚动,而EditText则不会被继续拉伸。

selectAllOnFocus:当我们点击想当我们的输入框获得焦点后,不是将光标移动到文本的开始或者结尾;而是获取到输入框中所有的文本内容的话!这个时候我们可以使用selectAllOnFocus属性。例如android:selectAllOnFocus="true"。

capitalize:设置英文字母大写类型的属性:android:capitalize默认none,提供了三个可选值:sentences:(仅第一个字母大写),words:(每一个单词首字母大小用空格区分单词),characters:(每一个英文字母都大写)。

。。。。。。

还有很多很多内容没提及到,如果要学就自己查阅资料吧。

Button(按钮)

textAllCaps:如果你的按钮是英文单词的话,这时就需要用android:textAllCaps属性来禁用系统会默认的将所有的字母转换成大写的。例如android:textAllCaps="false"。

还有一些函数方法,都不是太难,如果需要的话,可以自己查阅资料总结归纳。

ImageView(图片视图)

src属性和background属性的区别:在API文档中我们发现ImageView有两个可以设置图片的属性,分别是:src和background。常识:

①background通常指的都是背景,而src指的是内容!!

②当使用src填入图片时,是按照图片大小直接填充,并不会进行拉伸,而使用background填入图片,则是会根据ImageView给定的宽度来进行拉伸

adjustViewBounds:用于设置缩放是否保存原图长宽比。ImageView为我们提供了adjustViewBounds属性,用于设置缩放时是否保持原图长宽比!单独设置不起作用,需要配合maxWidthmaxHeight属性一起使用!而后面这两个属性 也是需要adjustViewBounds为true才会生效的~android:maxHeight:设置ImageView的最大高度,android:maxWidth:设置ImageView的最大宽度。也就是两者缺一不可。

我们也可以定义圆形或者圆角ImageView。就像QQ头像一样。由于对我这样的小白有些复杂,所以就只提一下,有兴趣的可以去网上找找,然后自己去试试。这样能很快的熟悉。

ProgressBar(进度条)

progressBar用于界面显示一个进度条,表示我们的程序正在加载数据。它的用法非常简单。先在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;

    //目标值,想改多少就改多少    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();

    }

    //完成相关参数初始化    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"/>

好啦,接下来就可以开始运行一下,看看效果吧。

ProressDialog(对话框进度条)

除了上面的还有一种显示在对话框上面的进度条。ProressDialog会在对话框中显示一个进度条,一般用于表示当前操作比较耗时,让用户耐心等待。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);

    }

    //实现接口的方式来注册

    @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="进度条对话框"

    android:textAllCaps="false"/>

ProgressDialog图

注意,如果在setCancelable()中传入false,表示ProgressDialog是不能通过Back键取消掉,这时你要在代码中做好控制,当数据加载完成后必须要调用ProgressDialog的dismiss()方法来关闭对话框,否则ProgressDialog,否则ProgressDialog将会一直存在。

AlertDialog(对话框)

alertDialog在当前界面弹出一个对话框,这个对话框置顶于所有界面元素之上的。能够屏蔽其他控件的交互能力,因此AlertDialog一般都是用于提示一些非常重要的内容或者警告信息。让我们来学习一下。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);

//实现接口的方式来注册

@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是否是一个指示器(用户无法进行更改)。

android:numStars:显示的星星数量,必须是一个整型值,如“100”。

android:rating:默认的评分,必须是浮点类型,像“1.2”。

android:stepSize:评分的步长,必须是浮点类型,像“1.2”。

常用的方法:

监听方法:setOnRatingBarChangelistener 

监听器:RatingBar.OnRatingBarChangeListener

先在活动对应的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>

好啦,今天学了这么多,好好消化一下吧。贪多不烂,温故知新的道理都懂吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容