【风马一族_Android】Android 前端内容1

 Android 前端内容 

4.1 View 类概述

  4.1.1 关于 View

    //类型说明

    view(视图)指的是用户界面组件的基本构建基块。一个视图占据屏幕上的矩形区域,负责绘图和事件处理。视图是基类的小部件,用来创建交互式用户界面组件 (如按钮、 文本字段等)。

    //参数提供

    

  4.1.2 关于 ViewGroup

    //类型说明

    //参数提供

4.2 布局

  4.2.1 相对布局 RelativeLayout

    //类型说明

    

    //参数提供

    //代码化说明

//对main.xml的片段代码讲解

//对activity_RelativeLayoutActivity.java的片段代码讲解

    //完整代码举例

【风马一族_Android】Android 前端内容1高清图   

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.com.sgmsc.Relative.Activity_RelativeLayoutActivity"> <TextView
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="在此处输入:" />
<!--
android:background="@android:drawable/editbox_background" 设置组件的背景
android:layout_below="@id/label" 先设置相对的属性,再获取所需的ID
-->
<EditText
android:id="@+id/entry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label"/>
<Button
android:id="@+id/Ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="确定" />
<Button
android:id="@+id/Cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:layout_toLeftOf="@id/Ok"
android:layout_alignTop="@id/Ok"
android:text="删除" />
</RelativeLayout>

main.xml

 import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast; public class Activity_RelativeLayoutActivity extends AppCompatActivity { private EditText editText; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main); editText = (EditText) findViewById(R.id.entry);
} public void onClick(View view){
switch (view.getId()){
case R.id.Ok:
Toast.makeText(this,"输入的数据:"+editText.getText(),Toast.LENGTH_SHORT).show();
break;
case R.id.Cancel:
if(editText.getText().length()>0)
Toast.makeText(this,"删除数据",Toast.LENGTH_SHORT).show();
else
Toast.makeText(this,"没有数据",Toast.LENGTH_SHORT).show();
editText.setText("");
break;
default:
break;
}
}
}

activity_RelativeLayout.java

  4.2.2 线性布局 LinearLayout

 //类型说明

    

    //参数提供

    //代码化说明

 

//完整代码举例

【风马一族_Android】Android 前端内容1高清图

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="cn.com.sgmsc.Line.Activity_LineLayoutActivity"> <!--
id="@+id/自己取的名字“ 所取的名字,必须是唯一,最好存在某种意义,
id="@id/取别人的名字” 例如:在相对布局中,就是获取其它的组件id,来识别相应组件的位置
组件、布局都需要其高度/宽度 wrap_contentr的大小是根据组件中文本大小及数量来决定
match_parent的大小是尽可能的占领空白空间
text="输入所要的文本内容"
layout_weight:表示权重,在线性布局中,权重的大小影响了组件在布局中显示的大及组件间的关系
android:onClick="onClick" 设置该组件在业务逻辑中可以进行事件处理,这一步骤让组件在
Activity_LineLayoutActivity.java无需定义组件,就可以直接进行业务逻辑
还有其它参数,没有使用,强烈希望读者可以尝试。
-->
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button1"
android:onClick="onClick"
android:layout_weight="1" />
<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button2"
android:onClick="onClick"
android:layout_weight="1" />
<Button android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button3"
android:onClick="onClick"
android:layout_weight="1" />
<Button android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button4"
android:onClick="onClick"
android:layout_weight="1" />
<Button android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button5"
android:onClick="onClick"
android:layout_weight="1" />
</LinearLayout>

main.xml

 import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast; public class Activity_LineLayoutActivity extends AppCompatActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//获取布局文件
setContentView(R.layout.main);
} //此对象,对应main.xml文件中,组件的android:onClick="onClick"
//此对象,用来对组件进行业务逻辑
public void onClick(View view){
//通过判断组件的Id,来确定相应的组件
switch (view.getId()){
case R.id.button1: //如果是按钮1,则进行业务逻辑
Toast.makeText(this, "你点击的是按钮 1", Toast.LENGTH_SHORT).show(); //显示屏中弹出提示框
break;
case R.id.button2://如果是按钮2,则进行业务逻辑
Toast.makeText(this, "你点击的是按钮 2", Toast.LENGTH_SHORT).show();
break;
case R.id.button3:
Toast.makeText(this, "你点击的是按钮 3", Toast.LENGTH_SHORT).show();
break;
case R.id.button4:
Toast.makeText(this, "你点击的是按钮 4", Toast.LENGTH_SHORT).show();
break;
case R.id.button5:
Toast.makeText(this, "你点击的是按钮 5", Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}

Activity_LinearLayout.java

  4.2.3 表格布局 TableLayout

【风马一族_Android】Android 前端内容1高清图

 <?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="0,1,2"
tools:context=".Activity_TableLayoutActivity"> <!--
android:stretchColumns 设置可伸展的列。该列可以向行方向伸展,最多可占据一整行。
android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多,已经挤满所在行,那么该子控件的内容将往列方向显示。
android:collapseColumns 设置要隐藏的列 TableLayout:表格布局
TableRow : 行,必需给
<TableRow> 所设的组件,都放在同一行
设置组件
</TableRow>
--> <TableRow><!-- row1 -->
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"
android:onClick="onClick"
android:layout_column="0" />
<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2"
android:onClick="onClick"
android:layout_column="1" />
</TableRow>
<TableRow><!-- row2 -->
<Button android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3"
android:onClick="onClick"
android:layout_column="1" />
<Button android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮4"
android:onClick="onClick"
android:layout_column="1" />
</TableRow>
<TableRow ><!-- row3 -->
<Button android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮5"
android:onClick="onClick"
android:layout_column="2" />
</TableRow>
</TableLayout>

main.xml

 import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast; public class Activity_TableLayoutActivity extends AppCompatActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
} public void onClick(View view){
switch (view.getId()){
case R.id.button1:
Toast.makeText(this,"这个按钮在第一行第一列",Toast.LENGTH_SHORT).show();
break;
case R.id.button2:
Toast.makeText(this,"这个按钮在第一行第二列",Toast.LENGTH_SHORT).show();
break;
case R.id.button3:
Toast.makeText(this,"这个按钮在第二行第二列",Toast.LENGTH_SHORT).show();
break;
case R.id.button4:
Toast.makeText(this,"这个按钮在第二行第三列",Toast.LENGTH_SHORT).show();
break;
case R.id.button5:
Toast.makeText(this,"这个按钮在第三行第三列",Toast.LENGTH_SHORT).show();
break;
}
}
}

Activity_TableLayout.java

  4.2.4 帧布局 FrameLayout

  

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.com.sgmsc.Frame.Activity_FrameLayout"> <!--
这个帧布局中放入三个按钮,按钮间的位置中叠加式的,处于最底部位置是从先放入的组件开始的,
处于最顶部位置的是最后放入的组件,其它部件的位置以此类推
从界面显示的效果可知
-->
<!--红色-->
<Button
android:layout_width="350sp"
android:layout_height="350sp"
android:layout_gravity="center"
android:background="@color/colorAccent"/> <!--蓝色-->
<Button
android:layout_width="250sp"
android:layout_height="250sp"
android:layout_gravity="center"
android:background="@color/colorPrimary"/> <!--淡青铜色-->
<Button
android:layout_width="150sp"
android:layout_height="150sp"
android:layout_gravity="center"
android:background="@color/colorPrimaryDark"/>
</FrameLayout>

main.xml 不含业务处理

【风马一族_Android】Android 前端内容1高清图

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.com.sgmsc.Frame.Activity_FrameLayout"> <!--
这个帧布局中放入三个按钮,按钮间的位置中叠加式的,处于最底部位置是从先放入的组件开始的,
处于最顶部位置的是最后放入的组件,其它部件的位置以此类推
从界面显示的效果可知
-->
<!--红色-->
<Button
android:id="@+id/Button_red"
android:onClick="onClick"
android:layout_width="350sp"
android:layout_height="350sp"
android:layout_gravity="center"
android:background="@color/colorAccent"/> <!--蓝色-->
<Button
android:id="@+id/Button_blue"
android:onClick="onClick"
android:layout_width="250sp"
android:layout_height="250sp"
android:layout_gravity="center"
android:background="@color/colorPrimary"/> <!--淡青铜色-->
<Button
android:id="@+id/Button_bronze"
android:onClick="onClick"
android:layout_width="150sp"
android:layout_height="150sp"
android:layout_gravity="center"
android:background="@color/colorPrimaryDark"/>
</FrameLayout>

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#95de5e</color>
<color name="colorAccent">#FF4081</color>
</resources>

Color.xml

 import android.app.Activity;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast; import static android.graphics.Color.BLUE; public class Activity_FrameLayout extends Activity { private Button button_red,button_blue,button_bronze; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main); button_red = (Button) findViewById(R.id.Button_red);
button_blue = (Button) findViewById(R.id.Button_blue);
button_bronze= (Button) findViewById(R.id.Button_bronze); } public void onClick(View view){
switch (view.getId()){
case R.id.Button_red:
button_red.setBackgroundColor(Color.parseColor("#adaf23"));
button_blue.setBackgroundColor(Color.parseColor("#3F51B5"));
button_bronze.setBackgroundColor(Color.parseColor("#95de5e"));
break;
case R.id.Button_blue:
button_red.setBackgroundColor(Color.parseColor("#FF4081"));
button_blue.setBackgroundColor(Color.parseColor("#FF02DE"));
button_bronze.setBackgroundColor(Color.parseColor("#95de5e"));
break;
case R.id.Button_bronze:
button_red.setBackgroundColor(Color.parseColor("#FF4081"));
button_blue.setBackgroundColor(Color.parseColor("#3F51B5"));
button_bronze.setBackgroundColor(Color.parseColor("#2ad5ca"));
break;
}
}
}

Activity_FrameLayout.java

  4.2.5 绝对布局 AbsoluteLayout

    绝对布局指的是组件固定在手机界面的某一位置。

    在现代中的智能手机,其屏幕大小各异、像素不统一,并且手机还会继续变化。

    使其组件在某些屏幕上无法按原先设计的界面,正常显示出来。

    说句话题外话,笔者就因一款学习外语的软件,它是固定横界面的。因笔者手机的问题,需要它变换界面的方向,才可以继续使用它。它死活不会让手机界面向另外一边横向,或者纵向。笔者只好弃用它了。对于一款面向用户的软件而言。不被使用,简直没有存在的价值。

    绝对布局已经过时,因此,笔者不再提供事例代码。推荐读者使用其它布局。

    温馨提供:如果没充分的理由,不要把界面、组件写死。

4.3 组件

    部件(Widget)是为构建用户交互界面提供服务的视图对象。Android和其他开发语言一样,提供一套完整的部件实现。常用的Widget包括TextView、EditText、Button、RadioButton、Checkbox和              ScrollView等。由于它们每一个都可以与用户进行交互,所以把Widget类中的每一个部件称为控件。

  Widget类是View类的子类,Widget内的所有控件都继承了View类中的属性和方法。可以在android.widget包中找到Android提供的控件列表。下面分别进行介绍。

  4.3.1 显示文本(TextView)与 显示图片(ImageView)

    TextView(文本框)是用来向用户显示文本内容的控件。它在android.widget.TextView包中定义,如果在Java类设计中使用它,则需要在相应的代码文件前部加上“import                                 android.widget.TextView;”。

   TextView控件中有很多可以在XML文件中设置的属性,这些属性同样可以在代码中以方法动态声明。常用的属性和对应的方法如表4.8所示。

        表4.8   TextView常用的属性和对应方法说明

属性             方法             描述

android:gravity    setGravity(int)         设置TextView在x轴和y轴方向上的显示方式

android:height     setHeight(int)         设置TextView的高度,以像素为单位

android:width      setWidth(int)          设置TextView的宽度,以像素为单位

android:hint       setHint(int)          当TextView中显示的文本内容为空时,显示的文本提示信息

android:padding     setPadding(int)        设置TextView中显示文本与其父容器边界的间距

android:text         setText(CharSequence)    为TextView设置显示的文本内容

android:textColor   setTextColor(ColorStateList) 设置TextView 的文本颜色

android:typeface    setTypeface(Typeface)    设置TextView 的文本字体

android:textSize     setTextSize(float)       设置TextView 的文本大小

android:textStyle     setTextStyle(TextStyle)     设置TextView 的文本字形,如粗体、斜体等

在使用中,要注意一些属性的区别。

1. android:gravity与android:layout_gravity的区别

android:gravity用于设置这个View内的所有子元素的对齐方式,而android:layout_gravity用于设置这个View在其父容器中的对齐方式。

2. android:padding与android:layout_margin的区别

padding是站在父View的角度描述问题的,它规定它里面的内容必须与这个父View边界的距离。而margin则是站在自己的角度描述问题的,规定自己和其他(上下左右)的View之间的距离,如果同一级只有一个View,那么它的效果基本上就和padding一样了。

 <TextView
android:layout_width="wrap_content" //文本框的宽度
android:layout_height="match_parent" //文本框的高度
android:text="sows" //文本的内容
android:textSize="23sp" //字体的大小
android:textColor="#aacc22" //字体的颜色
android:gravity="center"/> //字体相对文本框的位置

  4.3.2 编辑文本框 EditView

  4.3.3 按钮 Button 与 图片按钮 (ImageButton)

  4.3.4 单选按钮(CheckBox)与 多选按钮 (RadioButton)

  4.3.5 模拟时钟(AnalogClock)与 数字时钟 (DigitalClock)

  4.3.6 日期选择(DatePicker)与 时间选择 (TimePicker)

4.4 UI设计案例

  4.4.1 计算器界面

  4.4.2 掌上微博

4.5 总结

4.6 题目

4.7 设计类读物

4.8 汉英语对照表

  

  

  

  

---恢复内容结束---

上一篇:富文本编辑器ckeditor继承


下一篇:【leetcode】Pascal's Triangle I & II (middle)