zoukankan      html  css  js  c++  java
  • Android 基础(三)基本控件与基本布局

    Android的基本控件与基本布局

    常用控件的使用方法

    TextView

    <TextView
            android:id="@+id/text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="top|right"
            android:textSize="24sp"
            android:textColor="#00ff00"
            android:text="this is TextView"/>
    

    android:layout_width指定控件的宽度

    android:layout_height指定控件的高度

    可选值:

    • match_parent:当前控件的大小和父布局的大小一样

    • wrap_content:当前控件的大小刚好可以包含住里面的内容

    除了使用上述值,也可以对控件的宽和高指定一个固定的大小,但这样做有时会在不同手机屏幕的适配方面出现问题

    gravity:指定文字的对齐方式

    可以选top、bottom、left、right、center等,可以用“|”来指定多个值

    Button

    系统会对Button里的所有文字自动进行大小写转换,禁用可以用android:textAllCpas="false"

     		Button button = (Button) findViewById(R.id.button);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    ThirdActivity.actionStart(SecondActivity.this,1,"name");
                }
            });
    

    EditText

    让用户输入和编辑内容的控件

    Button+EditText的实例:

    		editText = (EditText) findViewById(R.id.edit_query);
            Button button = (Button) findViewById(R.id.button);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String inputText = editText.getText().toString();
                    Toast.makeText(ThirdActivity.this,inputText,Toast.LENGTH_SHORT).show();
                }
            });
    

    ImageView

    用于在界面上展示图片的一个控件

     <ImageView
            android:id="@+id/image_view"
            ....
            android:src="@drawable/img_1"/>
    

    也可以通过代码控制数据来源

    imageView.setImageResource(R.drawable.img_2);
    

    progressBar

    这是一个圆形进度条,旋转的进度条表示我们的程序正在加载数据

    通过Android的可见属性:android:visibility进行

    AlertDialog

    这是一个对话框,置顶于所有界面元素之上

    	private void showAlert() {
            AlertDialog.Builder dialog = new AlertDialog.Builder (ThirdActivity.this);
            dialog.setTitle("title");
            dialog.setMessage("hello");
            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();
        }
    

    progressDialog

    与AlertDialog类似,不同的是会在对话框中显示一个进度条。

    基本布局

    1.线性布局:LinearLayout

    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button3"/>
        </LinearLayout>
    

    horizontal是水平上,vertical则是垂直

    android:layout_gravity是对齐,用于指定控件在布局中的对齐方式

    如果布局方式选择的是水平,那么对齐也只能选择在垂直方向上的才会生效。

    因为这时水平方向上的长度是不固定的,如果又多一个控件,水平方向上的长度都会改变。所以不能指定在该方向上的布局。

    可以指定:topcenter_verticalbottom等值

    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        >
    
            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:hint="Type something"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:hint="Send"/>
            
        </LinearLayout>
    

    使用了layout_weight则允许使用百分比的方式指定控件大小,在手机屏幕适配性等方面可以起到非常重要的作用

    3表示3/5,2表示2/5

    使用的时候并不是布局里每个控件都要设置这个属性,也可以部分设置

     <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        >
    
            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="Type something"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="Send"/>
    
        </LinearLayout>
    

    这里指定了EditText的weight属性,表示Button仍然按照wrap_content计算,而EditText会占满屏幕所有的剩余空间。

    2.相对布局RelativeLayout

    可以通过相对定位的方式让控件出现在布局的任何位置

    虽然属性多,但是有规律可循,容易理解

    <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:text="button2"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="button3"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentBottom="true"
                android:text="button3"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:text="button3"/>
        </RelativeLayout>
    

    这英文其实非常好理解

    除了相对于父布局,还可以相对于控件

    <Button
                android:id="@+id/button_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:text="button1"/>
            <Button
                android:id="@+id/button_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/button_1"
                android:layout_toRightOf="@id/button_1"
                android:text="button2"/>
    

    其中layout_belowlayout_torightof就是在button1右下的意思

    3.帧布局FrameLayout

    所有的控件都会默认摆放在布局的左上角

    4.百分比布局

    前面只有线性布局可以用比例划分,因此引入了百分比布局。

    百分比布局对前面的相对布局和帧布局进行了拓展

    PercentFrameLayoutPercentRelativeLayout

    <androidx.percentlayout.widget.PercentFrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <Button
                android:id="@+id/button1"
                android:text="Button 1"
                android:layout_gravity="left|top"
                app:layout_widthPercent="50%"
                app:layout_heightPercent="50%"
                />
            <Button
                android:id="@+id/button2"
                android:text="Button 2"
                android:layout_gravity="right|top"
                app:layout_widthPercent="50%"
                app:layout_heightPercent="50%"
                />
            <Button
                android:id="@+id/button3"
                android:text="Button 3"
                android:layout_gravity="left|bottom"
                app:layout_widthPercent="50%"
                app:layout_heightPercent="50%"
                />
            <Button
                android:id="@+id/button4"
                android:text="Button 4"
                android:layout_gravity="right|bottom"
                app:layout_widthPercent="50%"
                app:layout_heightPercent="50%"
                />
        </androidx.percentlayout.widget.PercentFrameLayout>
    

    自定义View

    常用控件和布局的继承关系

    标题栏Demo

    程序中可能有多个活动需要用到标题栏,为了避免代码重复,可以抽出标题栏布局的相关代码,使用引入标题栏布局的方法。

    新建布局:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/title_bg">
    
        <Button
            android:id="@+id/title_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:background="@drawable/back_bg"
            android:text="Back"
            android:textColor="#fff" />
    
        <TextView
            android:id="@+id/title_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Title Test"
            android:textColor="#fff"
            android:textSize="24sp" />
    
        <Button
            android:id="@+id/title_edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:background="@drawable/edit_bg"
            android:text="Edit"
            android:textColor="#fff" />
    </LinearLayout>
    

    如何引入?只需要如下

    <include layout="@layout/title">
    

    如果说布局只有视图,可以直接这样写。但如果涉及到交互等一些逻辑代码,就需要创建一个自定义的view

    这里是继承自LinearLayout,还有很多种自定义view,需要后面更多时间的学习

    public class TitleLayout extends LinearLayout {
    
        public TitleLayout(Context context, AttributeSet attrs) {
            super(context,attrs);
            LayoutInflater.from(context).inflate(R.layout.title,this);
    
            Button titleBack = (Button) findViewById(R.id.title_back);
            Button titleEdit = (Button) findViewById(R.id.title_edit);
            titleBack.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    ((Activity) getContext()).finish();
                }
            });
            titleEdit.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(getContext(), "You clicked Edit button",
                            Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
    

    在构造函数中需要对标题栏布局进行动态修改,需要借助LayoutInflater

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例化;而findViewById()是找xml布局文件下的具体widget控件(如Button、TextView等)。
    
    具体作用:
    
    1、对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater.inflate()来载入;
    
    2、对于一个已经载入的界面,就可以使用Activiyt.findViewById()方法来获得其中的界面元素。
    
    LayoutInflater 是一个抽象类,在文档中如下声明:
    
    public abstract class LayoutInflater extends Object
    
    获得 LayoutInflater 实例的三种方法
    LayoutInflater inflater = getLayoutInflater();//调用Activity的getLayoutInflater()
    
    LayoutInflater inflater = LayoutInflater.from(context);
    
    LayoutInflater inflater = (LayoutInflater)context.getSystemService
        
        
    LayoutInflater.from(context).inflate(R.layout.title,this);
    通过from创建这个对象,在通过inflate方法,这个方法的第一个参数是要加载布局文件的id,第二个参数是给加载好的布局添加一个父布局,这就是在父布局this上加载这个title的布局,这样才可以直接通过findViewById找到title布局里的控件
    

    在xml中引用这个title控件

    需要指定包名

    <com.example.demoapplication.TitleLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    

    关于findViewById

    在android中,findViewById(int)是获取当前上下文中的组件,即在这句话的完整句子是:layout.findViewById(int),前面省略的layout,是默认在oncreate方法中setContentView(int layoutid)中设置的layout。
    这时候,如果我们需要访问的view并不在当前activity所在的layout中我们就需要先加载该view所在的layout然后通过layout来访问该view,如:

        LayoutInflator layoutInflator=getLayoutInflator();
        LinearLayout ll=(LinearLayout)layoutInflator.inflator(R.layout.XXX,null);
        TextView tv=(TextView)ll.findViewById(R.id.XX);
    
    不要忘记努力,不要辜负自己 欢迎指正 QQ:1468580561
  • 相关阅读:
    STL: merge
    STL: rotate
    javascript的prototype继承问题
    日期正则表达式
    有关linq的一系列学习的文章,值得收藏
    EF读取关联数据
    jQuery UI中的日期选择插件Datepicker
    LINQ的基本语法中八个关键字用法说明
    Shell变量内容的删除、替代与替换
    Shell命令别名与历史命令
  • 原文地址:https://www.cnblogs.com/smallocean/p/14448737.html
Copyright © 2011-2022 走看看