AndroidStudio入门基础(二)——基础组件

目录

下面就是今天要介绍的组件们啦~~

1.TextView

2.Button

3.EditText

4.RadioButton

5.CheckBox

6.Image

---

1.TextView

①文字的大小、颜色

下面代码中我的备注方式是不对的哈

<TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TREE"
        android:textColor="#6BD089"  ！！设置文字的颜色
        android:textSize="50sp"  ！！设置文字的大小，注意单位sp
        />

②文字显示不完时用...代替

 <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="We wish each other a long life so as to share the beauty of this graceful moonlight, even though miles apart."
        android:textColor="#6BD089"
        android:textSize="50sp"
        android:maxLines="1"   ！！！
        android:ellipsize="end"  ！！！
        />

③文字上显示中划线、下划线

显示中划线和下划线这个样式就是.xml文件里面设置不了的样式了，需要在java代码中设置。

<TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello world"
        android:textColor="#6BD089"
        android:textSize="50sp"
        />
<TextView
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello world"
        android:textColor="#6BD089"
        android:textSize="50sp"
        />

public class SecondActivity extends AppCompatActivity {
    TextView textView1,textView2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second_layout);

        textView1=findViewById(R.id.tv_1);
        textView2=findViewById(R.id.tv_2);

        //中划线
        textView1.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
        //下划线
        textView2.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);
    }
}

④跑马灯效果

<TextView
        android:id="@+id/tv_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="We wish each other a long life so as to share the beauty of this graceful moonlight, even though miles apart."
        android:textColor="#6BD089"
        android:textSize="50sp"
        android:singleLine="true"  ！！
        android:ellipsize="marquee"  ！！
        android:marqueeRepeatLimit="marquee_forever"  ！！
        android:focusable="true"  ！！
        android:focusableInTouchMode="true"  ！！
    />

---

2.Button

①按钮文字的大小和颜色

<Button
        android:id="@+id/bt_11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I'm a button"  ！！设置按钮上的文字
        android:textSize="30sp"   ！！设置按钮上的文字的大小
        android:textColor="#ffffff"  ！！设置按钮上的文字的颜色
        android:background="#22B14C"
        />

②自定义按钮形状

但是按钮一般都是有圆角的呀~太方正的按钮实在是不好看

这里，我们要在drawable文件夹里面新建一个为button量身定做的样式文件，实质也是一个.xml文件

在这个样式文件中设置样式：（我将样式文件取名为bt_shape）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">  ！！设置按钮为矩形
    <solid android:color="#22B14C"/> ！！设置按钮的颜色
    <corners android:radius="12dp"/> ！！设置按钮圆角的弧度
</shape>

然后再将这个样式应用到按钮上

<Button
        android:id="@+id/bt_11"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="I'm a button"
        android:textSize="30sp"
        android:textColor="#ffffff"
        android:background="@drawable/bt_shape"  ！！给按钮应用样式文件
        />

再尝试一种新的样式~~

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="#FF7F27"/>
    <corners
        android:radius="10dp"/>
</shape>

③自定义按钮的按压效果 biubiubiu~~

实现按钮的按压效果也是通过为按钮设置样式文件实现的，不多解释啦，直接上代码~~

<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>

④为按钮设置点击事件

为按钮设置点击事件是在java代码中实现的，共有三大步骤，步骤是通用的，不仅仅是为按钮

• 声明组件  （实例化Button类，声明一个Button类的实例对象，取名叫button）
• 找到组件  （通过findViewById方法找到这个按钮是xml文件中的哪个按钮，参数R.id.XXX，这里的XXX和xml中的android:id="@+id/XXX"保持一致）
• 设置事件   （通过setOnClickListener方法实现，参数是实例化一个OnClickListener对象）

public class SecondActivity extends AppCompatActivity {
    Button button; //声明组件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second_layout);

        button=findViewById(R.id.bt_1); //找到组件

        button.setOnClickListener(new View.OnClickListener() { //为组件设置点击事件
            @Override
            public void onClick(View v) {
                Toast.makeText(FirstActivity.this,"hello",Toast.LENGTH_SHORT).show();
            }
        });
   }
}

---

3.EditText

EditText就是一个用户输入框，主要属性有：

• layout_width、layout_height    输入框大小
• textSize、textColor    输入文字的大小和颜色
• hint     输入提示
• inputType    输入类型

<EditText
        android:id="@+id/et_1"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:textSize="20sp"
        android:textColor="#22B14C"
        android:hint="Username:"  ！！
        />

<EditText
        android:id="@+id/et_2"
        android:layout_below="@id/et_1"
        android:layout_marginTop="30dp"
        android:layout_width="fill_parent"
        android:layout_height="50dp" 
        android:inputType="textPassword"  ！！
        android:textSize="20sp"
        android:textColor="#22B14C"
        android:hint="Password:"  ！！
        />

---

4.RadioButton

RadioButton就是单选按钮，一个RadioButton就是一个选项，很多个选择组成了一组选项，需要用RadioGroup包裹在一起。可以把RadioGroup当成LinearLayout，只不过RadioGroup里面只能装RadioButton

下面我就展示三个小案例的效果图及其源代码，需要可以直接用~~

Tips:

• RadioGroup可以设置orientation，从而决定选项是横着排列，还是垂直排列
• 单选按钮软件有自带的，但是可以删除掉自定义图片

小案例一：

<RadioGroup
        android:id="@+id/rg_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="30dp"
        >
        <RadioButton
            android:id="@+id/rd_1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="麻辣小龙虾"
            android:textSize="25sp"
            />
        <RadioButton
            android:id="@+id/rd_2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="水煮肉片"
            android:textSize="25sp"/>

        <RadioButton
            android:id="@+id/rd_3"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="五香粉蒸肉"
            android:textSize="25sp"/>

    </RadioGroup>

小案例二：

  <RadioGroup
        android:id="@+id/rg_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/rg_1"
        android:orientation="horizontal"
        android:padding="30dp"
        >
        <RadioButton
            android:id="@+id/rd_5"
            android:layout_width="130dp"
            android:layout_marginRight="20dp"
            android:layout_height="50dp"
            android:text="选项1"
            android:gravity="center"
            android:textSize="25sp"
            android:button="@null"
            android:background="@drawable/bt55"
            />
        <RadioButton
            android:id="@+id/rd_4"
            android:layout_width="130dp"
            android:layout_height="50dp"
            android:button="@null"
            android:gravity="center"
            android:text="选项2"
            android:background="@drawable/bt55"
            android:textSize="25sp"
            />
    </RadioGroup>

按钮的样式文件：

<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>

小案例三

<RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="68dp"
        android:layout_alignParentBottom="true"
        android:background="#F7F7F7"
        android:orientation="horizontal"
        android:paddingTop="7dp">

        <RadioButton
            android:id="@+id/rb_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:text="首页"
            android:textColor="@drawable/main_tab_text_selector_tab"
            android:textSize="13sp" />

        <RadioButton
            android:id="@+id/rb_category"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:button="@null"
            android:gravity="center"
            android:text="分类"
            android:textColor="@drawable/main_tab_text_selector_tab"
            android:textSize="13sp" />


        <RadioButton
            android:id="@+id/rb_more"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:button="@null"
            android:gravity="center"
            android:textColor="@drawable/main_tab_text_selector_tab"
            android:textSize="13sp" />

        <RadioButton
            android:id="@+id/rb_cart"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:button="@null"
            android:gravity="center"
            android:text="购物车"
            android:textColor="@drawable/main_tab_text_selector_tab"
            android:textSize="13sp" />

        <RadioButton
            android:id="@+id/rb_profile"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:button="@null"
            android:gravity="center"
            android:text="我的"
            android:textColor="@drawable/main_tab_text_selector_tab"
            android:textSize="13sp" />

    </RadioGroup>

---

5.CheckBox

CheckBox是多选框，用法和RadioButton非常相似，但是不需要用Group包裹起来~

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="麻辣小龙虾"
        android:textSize="25sp"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水煮肉片"
        android:textSize="25sp"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="五香粉蒸肉"
        android:textSize="25sp"/>

---

6.ImageView

ImageView标签就是用来展示图片的，需要掌握的属性有

• scaleType  图片展示格式
• src  图片来源

其中scaleType的属性值如下：

• centerCrop  保持宽高比缩放，直至完全覆盖控件，裁剪显示
• fitXY   充满整个控件，图片可能会伸缩
• fitCenter   保持宽高比，直到可以完全显示

这是图片的原图

scaleType的属性值依次为：centerCrop 、 fitXY 、 fitCenter

介绍到这里，AndroidStudio常用的基本组件就介绍完了~~喵喵喵~ (≧∀≦)ゞ