Android入门篇之UI设计

作者: ADVANCE_ae | 来源:发表于2016-07-01 18:26 被阅读309次

View

1.TextView和EditText

   TextView用来显示文本信息，EditText用来编辑输入文本信息。EditText继承自TextView，TextView继承   
自View。
   Xml中常用的一些属性：
    1. android:layout_width="match_parent" 表示该控件显示的宽度
    2. android:layout_height="wrap_content" 表示该控件显示的高度
    设置成wrap_content:表示高度或者宽度包裹住内容。
    设置成match_parent:表示填满父控件。
    也可以设置成具体的数值，eg，45dp。
    上述两个属性是View视图都必须设置的属性。
    3. android:text="@string/app_name" 显示的内容。这是规范的写法，将文字存放到string.xml中name=app_name的文本。
    4. android:textColor="@color/colorPrimary" ,设置文本颜色。这是规范的写法，将颜色值存放到colors.xml中name=colorPrimary的色值。
    5. android:gravity = "center" ，设置文本居中。
    6. android:textSize="@dimen/common_text_size",设置文本的字体大小，文本字体大小单位习惯用"sp",长度单位习惯用"dp"。
    7. android:layout_marginTop = "@dimen/margin_top" 设置上边距 
    8. android:layout_marginBottom="@dimen/margin_bottom" 设置底边距
    9. android:layout_marginLeft="@dimen/margin_left" 设置左边距
   10. android:layout_marginRight="@dimen/margin_right" 设置右边距
   11. android:drawableLeft="@mipmap/ic_launcher"     可以在文字的左边显示一个图片         
        android:drawableBottom="@mipmap/ic_launcher"  可以在文字的底部显示一个图片         
        android:drawableRight="@mipmap/ic_launcher"  可以在文字的右边边显示一个图片         
        android:drawableTop="@mipmap/ic_launcher"  可以在文字的上边显示一个图片         
        android:drawablePadding="@dimen/margin" 设置图片和文字的间距
 EditText几个不同于TextView的常见属性：
   1. android:hint="@string/hint" 表示在输入之前的提示，当EditText
      获取焦点，并输入文字时，该文本自动消失，起提示作用。
   2.android:password = "true"。表示该文本输入框是用来输入密码的，输入的文本会自动转换成".",起到隐藏用户密码的作用。

2.Button

  一个按钮，用法设置和TextView基本一样。区别在于Button可以设置按钮的效果以及事件的监听。
 <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="100dp"
    android:layout_marginLeft="@dimen/margin_left"
    android:layout_marginRight="@dimen/margin_right"
    android:layout_marginBottom="@dimen/margin_bottom"
    android:layout_marginTop="@dimen/margin_top"
    android:background="@drawable/button"
    android:text="@string/button_name"
    android:textColor="@color/colorPrimary"
    android:textSize="@dimen/common_text_size"
    android:id="@+id/btn_login"
    android:onClick="buttonOnClick" <!-- 设置点击事件的一种方式,可以不用findViewById(id)找到
                                    id，因为Android系统使用了反射可以调用到该方法，实际开发中
                                    基本不用，都是通过找到按钮的id，再进行事件的监听。-->
    />

  /**
    * 点击事件，因为采用的反射，此处必须保证该方法是public
    */
  public void buttonOnClick(View v){
        //....点击上述的按钮之后进行的操作。
  }

3.ImageView

  用于展示图片，与TextView一样，区别在于ImageView是用于显示图片。
    <ImageView    
        android:id="@+id/iv_image"      
        android:layout_width="wrap_content"          
        android:layout_height="wrap_content"      
        android:src="@mipmap/ic_launcher"    
        android:background="@mipmap/bg1"        
        android:onClick="onImgClick"    
        android:scaleType="center"    />

4.自定义View

关于自定义View可以看看下面这两位仁兄的。
AigeStudio
张鸿洋

Dialog

   对话框是Android系统在Activity或者其他组件运行过程中提供的一种资源消耗很小的提示机制，它可以帮助
应用完成一些必不可少的提示功能，还能给用户提供良好的交互功能，操作简单。

1.提示对话框

   应用场景很多，比如退出应用时，弹出一个提示框，让用户决定是否退出程序等。

   new AlertDialog.Builder(this)
    .setIcon(android.R.drawable.ic_dialog_alert)
    .setTitle(R.string.alert)
    .setMessage(getString(R.string.is_quit))
    .setPositiveButton(R.string.confirm, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            finish();
        }
    })
    .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            //to do something cancel     
        }
    })
   .create().show();

2.单选对话框

重点在于Builder实例对象设置setSingleChoiceItems，表示单选对话框。

  new AlertDialog.Builder(this)
    .setIcon(android.R.drawable.ic_dialog_alert)
    .setTitle(R.string.alert)
    .setMessage(getString(R.string.is_quit))
    .setSingleChoiceItems(array,1, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            //which 列表中点击的单选的position
        }
    })
    .setPositiveButton(R.string.confirm, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            finish();
        }
    })
    .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            //to do something cancel
        }
    })
    .create().show();

3.复选对话框

重点在于Builder实例对象设置setMultiChoiceItems，表示多选对话框。

new AlertDialog.Builder(this)
    .setIcon(android.R.drawable.ic_dialog_alert)
    .setTitle(R.string.alert)
    .setMessage(getString(R.string.is_quit))
        .setMultiChoiceItems(array, null, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked) {

            }
        })
    .setPositiveButton(R.string.confirm, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            finish();
        }
    })
    .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            //to do something cancel
        }
    })
    .create().show();

4.列表对话框

重点在于Builder实例对象设置setItems，表示列表对话框。

 new AlertDialog.Builder(this)
        .setIcon(android.R.drawable.ic_dialog_alert)
        .setTitle(R.string.alert)
        .setItems(array, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                
            }
        })
        .create().show();

5.进度条对话框(ProgressDialog)

Android 系统的进度条对话框为人机之间提供了良好的交互体验，它的使用范围非常广,系统提供了圆形和水平两种进度条。
圆形进度条：

    ProgressDialog dialog = new ProgressDialog(this);  
    dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);// 设置进度条的形式为圆形转动的进度条  
    dialog.setCancelable(true);// 设置是否可以通过点击Back键取消  
    dialog.setCanceledOnTouchOutside(false);// 设置在点击Dialog外是否取消Dialog进度条  
    dialog.setIcon(R.drawable.ic_launcher);//  
    // 设置提示的title的图标，默认是没有的，如果没有设置title的话只设置Icon是不会显示图标的  
    dialog.setTitle("提示");  
    dialog.setMessage("这是一个圆形进度条");  
    dialog.show();

水平进度条：

ProgressDialog dialog = new ProgressDialog(this);  
dialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);// 设置水平进度条  
dialog.setCancelable(true);// 设置是否可以通过点击Back键取消  
dialog.setCanceledOnTouchOutside(false);// 设置在点击Dialog外是否取消Dialog进度条  
dialog.setIcon(R.drawable.ic_launcher);// 设置提示的title的图标，默认是没有的  
dialog.setTitle("提示");  
dialog.setMessage("这是一个水平进度条");  
dialog.show();

6.日期时间选择对话框

时间选择对话框与日期选择对话框操作极其相似，它是用来设置时间。
  Calendar calendar = Calendar.getInstance();
    new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {
        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {

        }
    },calendar.get(Calendar.HOUR_OF_DAY),calendar.get(Calendar.MINUTE),true).show();

7.拖动对话框

应用场景：类似设置音量大小或者设置屏幕大小。

    Dialog dialog = new Dialog(this);
    dialog.setTitle("拖动对话框");
    dialog.setContentView(R.layout.seek_bar);
    SeekBar seekBar = (SeekBar) dialog.findViewById(R.id.seekBar);
    seekBar.setMax(100);
    final TextView textView = (TextView) dialog.findViewById(R.id.textView);
    textView.setText("当前买的进度为："+ seekBar.getProgress());
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            //当进度条变化时回调该函数
            textView.setText("当前买的进度为："+ seekBar.getProgress());
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            //开始拖动时回调
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            //停止拖动时回调
        }
    });
    dialog.show();

seek_bar.xml布局：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="10dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/seekBar"
        android:layout_centerHorizontal="true" />
    </RelativeLayout>

8.自定义对话框

一般说来，Android系统提供的这些对话框的风格，背景都是原生的，肯定不能满足我们在实际开发中的个性化需求，所以一般来说，我们都会自定义Dialog并设置其中的一些属性来改变对话框的风格和展示的位置，从而满足需求。

public class MyDialog extends Dialog {
    private Window window;

    public MyDialog(Context context) {
        super(context);

        init();
    }

    private void init() {
        //获取窗口管理对象
        window = this.getWindow();
        //去掉系统默认的对话框背景
        window.setBackgroundDrawable(new ColorDrawable(0));
        //获取窗口参数
        WindowManager.LayoutParams layoutParams = window.getAttributes();
        //设置对话框显示在屏幕的顶部,默认是显示在屏幕的中心
        layoutParams.gravity = Gravity.TOP;
        //设置外部单击可以回收对话框
        setCanceledOnTouchOutside(true);
        //去掉对话框的标题栏
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        //设置对话框的内容
        window.setContentView(R.layout.dialog_my);
    }
}

菜单

1.上下文菜单(ContextMenu)

Android系统中的ContextMenu类似于PC中的右键弹出菜单,当一个视图注册了上下午菜单时,长按该视图对象将会出现一个提供相关功能的浮动菜单.上下文菜单可以被注册到任何视图对象中,最常见的是用于列表视图ListView中,,但上下文菜单不支持图标和快捷键。

使用步骤:
1.在Activity中使用上下午菜单,重写onCreateContextMenu() 和 onContextItemSelected()方法。
2.为视图控件View中注册上下文菜单,使用registerForContextMenu(View)方法。
3.在onCreateContextMenu(...ContextMenu menu)中添加菜单项menu.add(...)。
4.在onContextItemSelected()中通过设置菜单的id来实现菜单子项的监听。

可以看看这位哥们写的这系列,非常详细:
CodingMyWorld

2.选项菜单

使用步骤:
1.在Activity中复写onCreateOptionsMenu(...)和onOptionsItemSelected(...)方法。
2.在onCreateOptionsMenu(Menu menu)中添加菜单选项。有两种方式,一种是调用menu.add(...);二是从布局文件中加载,在res下的menu文件夹中,填写相应的选项。
3.在onOptionsItemSelected(...)通过设置菜单的id来实现菜单子项的监听。

3.下拉菜单(Spinner可以实现这个效果)

使用步骤:
1.获取Spinner实例对象,在java中通过findViewById(..)来获取,意味需要在xml布局中设置。
2.为Spinner配置一个数据适配器(ListAdapter),用来提供数据的显示控制。
3.监听Spinner的数据单击事件。

xml中引用:

    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:entries="@array/languages"
      />

android:entries="@array/languages",Spinner的数据集合是从资源数组languages中获取的，languages数组资源定义在values/arrays.xml中：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="languages">
        <item>c语言</item>
        <item>php</item>
        <item>android</item>
        <item>java </item> 
        <item>html5</item>
    </string-array>
</resources>

为选项单击设置监听器:

spinner.setOnItemSelectedListener(new OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> parent, View view, 
                int pos, long id) {

        }
        @Override
        public void onNothingSelected(AdapterView<?> parent) {
       
        }
    });

Toast

1.系统Toast

  Toast就是我们经常看到app上弹出的提示。现在Google推荐使用Snackbar来替代.
  系统默认的Toast只能设置文字和显示特定的时间.

Toast

2.自定义Toast

 步骤:
  1.继承Toast
  2.自定义Toast布局.
    Toast toast =  new Toast(this);
    toast .setDuration(Toast.LENGTH_LONG);
    toast.setView(layout);
    toast.setGravity(Gravity.CENTER,0,0);
    toast.show();

Android入门篇之UI设计

View

1.TextView和EditText

2.Button

3.ImageView

4.自定义View

Dialog

1.提示对话框

2.单选对话框

3.复选对话框

4.列表对话框

5.进度条对话框(ProgressDialog)

6.日期时间选择对话框

7.拖动对话框

8.自定义对话框

菜单

1.上下文菜单(ContextMenu)

2.选项菜单

3.下拉菜单(Spinner可以实现这个效果)

Toast

1.系统Toast

2.自定义Toast

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android基础