Android学习-2.1UI 组件

最新推荐文章于 2024-07-25 23:12:21 发布

芝士夹心卷

最新推荐文章于 2024-07-25 23:12:21 发布

阅读量279

点赞数

分类专栏：学习文章标签： android

本文链接：https://blog.csdn.net/weixin_42133317/article/details/115631597

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

UI组件

1.布局管理器：线性布局（默认水平排列）、相对布局

1.布局管理器：线性布局（默认水平排列）、相对布局

wrap_content:内容有多少，宽度有多少。match_parent :上一节空间宽度是多少，当节空间宽度是多少。orientation:vertical(方向垂直)、orientation:horizontal(水平排列）【线性布局独有】。

gravity：内部元素对齐方式。layout_weight:权重（把剩余内容按照权重分配）、此例中权重一边一半。

padding:内边距。。。。单位常用：dp。。

android:layout_margin就是设置view的上下左右边框的额外空间

android:padding是设置内容相对view的边框的距离

layout_alignParentBottlom=“true”:和副空间底部对齐。

2.TextView

文字大小、颜色

显示不下使用....

文字+icon

中划线、下划线

跑马灯

text里面的单位：sp

maxLines:实现行数控制。ellipsize:“end”实现内容呈现不下，表现...。layout_marginTop:与上一个间隔

在MainActivity上实现界面的跳转：

在TextViewActivity.java中实现，中划线、下划线：

private TextView mTv4,mTv5;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        mTv4 = (TextView) findViewById(R.id.tv_4);
        mTv4.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);//中划线
        mTv4.getPaint().setAntiAlias(true);//去除锯齿

        mTv5=(TextView) findViewById(R.id.tv_5);
        mTv5.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);//下划线

跑马灯：

focusable=true:表示可聚焦。移动光标时是否能聚焦到组件上，比如按钮，就是移动光标是按钮会变成选中状态，如果focusable为false，那么就跳过此组件，下一个组件变成选中状态。

focusableInTouchMode可以通过触摸获取焦点。

3.Button

1)文字大小，颜色

 <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:background="#FF0000"/>文字大小、颜色

2)自定义背景形状

<Button
        android:id="@+id/btn_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:textColor="#F44336"
        android:textSize="20sp"
        android:background="@drawable/bg_btn2"
        android:layout_below="@id/btn_1"
        android:layout_marginTop="10dp" />

3)自定义按压效果

 <Button
        android:id="@+id/btn_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:textColor="#FF9900"
        android:textSize="20sp"
        android:background="@drawable/bg_btn3"
        android:layout_below="@id/btn_2"
        android:layout_marginTop="10dp"/>

    <Button
        android:id="@+id/btn_4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮4"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:background="@drawable/bg_btn4"
        android:layout_below="@id/btn_3"
        android:onClick="showToast"
        android:layout_marginTop="10dp"/>按压效果



bg_btn4.xml：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#AA6600"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape>
            <solid android:color="#FF9900"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

</selector>

4)点击事件

onClick:出现提示信息。

在ButtonActivity.java中

public class ButtonActivity extends AppCompatActivity {

    private Button mBtn3;

//    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        mBtn3 = findViewById(R.id.btn_3);
        mBtn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                    Toast.makeText(ButtonActivity.this,"btn_3点击了",Toast.LENGTH_SHORT).show();
            }
        });
    }

    public void showToast(View view){
        Toast.makeText(this,"btn_4点击了",Toast.LENGTH_SHORT).show();
    }
}

4.EditText(可输入)

1）常用属性

hint:提示输入信息。intputType="textPassword"文字加密。

2）监听事件

3）登录界面

5.RdioButton

1)常用属性

单选框：RadioGroup

checked="true"表示：默认选择，本例为默认选择男。

2）自定义样式

 <RadioGroup
        android:id="@+id/rg_1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/rb_1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="男"
            android:textSize="18sp"
            android:checked="true"
            android:textColor="#FF6600" />

        <RadioButton
            android:id="@+id/rb_2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="女"
            android:textSize="18sp"
            android:textColor="#FF6600" />

    </RadioGroup>

    <RadioGroup
        android:id="@+id/rg_2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/rg_1"
        android:layout_marginTop="50dp">

        <RadioButton
            android:id="@+id/rb_3"
            android:layout_height="30dp"
            android:layout_width="60dp"
            android:text="男"
            android:button="@null"
            android:gravity="center"
            android:textSize="18sp"
            android:checked="true"
            android:textColor="#000"
            android:background="@drawable/select_orange_radiobutton"/>

        <RadioButton
            android:id="@+id/rb_4"
            android:layout_height="30dp"
            android:layout_width="60dp"
            android:text="女"
            android:button="@null"
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="#000"
            android:background="@drawable/select_orange_radiobutton"
            android:layout_marginLeft="10dp"/>

    </RadioGroup>

3）监听事件

public class RadioButtonActivity extends AppCompatActivity {

    private RadioGroup mRg1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_button);
        mRg1 = findViewById(R.id.rg_1);
        mRg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radioButton = group.findViewById(checkedId);
                Toast.makeText(RadioButtonActivity.this,radioButton.getText(),Toast.LENGTH_SHORT).show();
            }
        });
    }
}

6.复选框CheckBox

在activity_check_box.xml:中

 <TextView
        android:id="@+id/tv_title"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="开发语言："
        android:textColor="#000000"
        android:textSize="24sp"
        android:layout_marginBottom="20dp" />

    <CheckBox
        android:id="@+id/cb_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"
        android:textSize="24sp"
        android:textColor="#FF6600"
        android:layout_below="@id/tv_title"
        android:layout_marginBottom="20dp"/>

    <CheckBox
        android:id="@+id/cb_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ios"
        android:textSize="24sp"
        android:textColor="#FF6600"
        android:layout_below="@id/cb_1"
        android:layout_marginBottom="20dp"/>

    <CheckBox
        android:id="@+id/cb_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="H5"
        android:textSize="24sp"
        android:textColor="#FF6600"
        android:layout_below="@id/cb_2"
        android:layout_marginBottom="20dp"/>

    <CheckBox
        android:id="@+id/cb_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="其他"
        android:textSize="24sp"
        android:textColor="#FF6600"
        android:layout_below="@id/cb_3" />

2）设置按钮样式

在bg_checkbox.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/icon_checkbox_true"/>
    <item android:state_checked="false" android:drawable="@drawable/icon_checkbox_false"/>
</selector>

7.ImageView

1)Button的其他衍生控件：TonggleButton.Switch

activity_image_view.xml:中src:存放内容。

2)常用属性

3)加载网络图片

在github：https://github.com/bumptech/glide

repositories {
  google()
  mavenCentral()
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.12.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}

将以上代码复制在build.gradle相应位置。

同时，需要在AndroidManifest.xml上添加网络请求权限

7.ListView(列表视图)

需要使用Adapter：https://blog.csdn.net/xfxf996/article/details/80953275

设置MyListAdap

public class MyListAdapter extends BaseAdapter {

     private Context mContext;
     private LayoutInflater mlayoutInflater;
     public MyListAdapter(Context context){
         this.mContext=context;
         mlayoutInflater=LayoutInflater.from(context);
     }


    @Override
    public int getCount() {//表示数据长度
        return 10;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    static class ViewHolder{
         public ImageView imageView;
         public TextView tvTitle,tvTime,tvContent;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
         ViewHolder holder = null;
        if(convertView == null){
            convertView = mlayoutInflater.inflate(R.layout.layout_list_item,null);
            holder = new ViewHolder();
            holder.imageView = convertView.findViewById(R.id.iv);
            holder.tvTitle = convertView.findViewById(R.id.tv_title);
            holder.tvTime = convertView.findViewById(R.id.tv_time);
            holder.tvContent = convertView.findViewById(R.id.tv_content);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }
        //给控件赋值
        holder.tvTitle.setText("标题");
        holder.tvTime.setText("2088-08-08");
        holder.tvContent.setText("内容");
        Glide.with(mContext).load("https://docs.ebdoor.com/image/company/283/2836590_intro1.jpg").into(holder.imageView);
         return convertView;
    }
}

LayoutInflater.inflate:https://blog.csdn.net/sakurakider/article/details/80874011

设置点击事件：

效果呈现：

8.GridView

android :numColumns:表示列数

芝士夹心卷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android学习-2.1UI 组件

UI组件布局管理器：线性布局（默认水平排列）、相对布局wrap_content:内容有多少，宽度有多少。match_parent :上一节空间宽度是多少，当节空间宽度是多少。orientation:vertical(方向垂直)、orientation:horizontal(水平排列）【线性布局独有】。gravity：内部元素对齐方式。layout_weight:权重（把剩余内容按照权重分配）、此例中权重一边一半。padding:内边距。。。。单位常用：dplayout_ali
复制链接

扫一扫