自学Android第六天——UI开发

textStyle：设置字体风格，三个可选值：nomal（无效果），bold（加粗），italic（斜体）；

gravity:来指定文字对齐方式，可选值有top、bottom、left、right、center（效果等同于center_vertical | center_horizontal,即水平和垂直方向都居中）等，可以用 | 来同时指定多个值。

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

带边框的TextView（EditText的用法也一样）

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

   

   

   

   

        android:width="2px"

        android:color="#000000" />

   

   

        android:bottomLeftRadius="10px"

        android:bottomRightRadius="10px"

        android:topLeftRadius="10px"

        android:topRightRadius="10px" />

   

   

        android:bottom="5dp"

        android:left="5dp"

        android:right="5dp"

        android:top="5dp" />

然后我们在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属性，用于设置缩放时是否保持原图长宽比！单独设置不起作用，需要配合maxWidth和maxHeight属性一起使用！而后面这两个属性 也是需要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文件里添加如下代码：

 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_height="wrap_content"

    android:id="@+id/pro_1"

    style="?android:attr/progressBarStyleHorizontal"

    android:max="100"/>

   

    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_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文件里添加如下代码：

 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的文件：

      

      

     

最后在style.xml中自定义下RatingBar Style，在style.xml加上这个：

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