疯狂Android讲义（第3版）学习笔记（第二章---界面编程）

1，代码控制UI界面

  一般我们的UI布局都是在xml文件中调整的，这里练习一下在activity中设置UI布局

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Context mContext = MainActivity.this;
private int mTenDp;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout linearLayout = new LinearLayout(mContext);
setContentView(linearLayout);
linearLayout.setOrientation(LinearLayout.VERTICAL);
mTenDp = DensityUtil.dp2px(mContext, 10);
// 转为dp单位
linearLayout.setPadding(mTenDp *2, mTenDp, mTenDp *2, mTenDp);
Button button = new Button(mContext);
// 向线性布局中添加View
linearLayout.addView(button);
// 设置Button在父布局中的显示方式
button.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
// 和布局中设置的@string/button的位置是一样的
button.setText(R.string.button);
// 转为sp单位
button.setTextSize(TypedValue.COMPLEX_UNIT_SP , 18);
button.setOnClickListener(this);
}

@Override
public void onClick(View view) {
Toast.makeText(mContext, "HelloWorld!", Toast.LENGTH_SHORT).show();
}
}

2，自定义View之跟随手指移动的小球

  简单练习了一个小球随手指移动的自定义控件的代码编写

//（View）DrawView
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
* 自定义一个随手指不断移动的小球
*/
public class DrawView extends View{
// 圆心坐标
int circleX = 100;
int circleY = 100;

// 创建一个画笔
Paint mPaint = new Paint();

// 重写三个构造
public DrawView(Context context) {
this(context , null);
}

public DrawView(Context context, AttributeSet attrs) {
this(context, attrs , 0);
}

public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 画笔指定圆球颜色
mPaint.setColor(Color.BLUE);

// 画布指定圆心 半径和画笔
canvas.drawCircle(circleX ,circleY , 100 , mPaint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// 获取目前触摸位置的x和y坐标
circleX = (int) event.getX();
circleY = (int) event.getY();

// 通知当前组件重绘自己
invalidate();

// 返回true表示事件已处理
return true;
}
}
----------------------------------------------------------------------------------------
//(layout)activity_main
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.test.drawview.MainActivity">

<com.test.drawview.DrawView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
----------------------------------------------------------------------------------------
// MainActivity
import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

3，霓虹灯效果

  熟悉帧布局是一层盖一层的；同一类控件做了同样的事情，可以考虑用数组的方式定义并初始化；更新UI必须在UI线程中进行

//(layout)activity_main
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.framelayout.MainActivity">

<TextView
android:id="@+id/red"
android:layout_gravity="center"
android:layout_width="350dp"
android:layout_height="350dp"/>

<TextView
android:id="@+id/orange"
android:layout_gravity="center"
android:layout_width="300dp"
android:layout_height="300dp"/>

<TextView
android:id="@+id/yellow"
android:layout_gravity="center"
android:layout_width="250dp"
android:layout_height="250dp"/>

<TextView
android:id="@+id/green"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"/>

<TextView
android:id="@+id/cyan"
android:layout_gravity="center"
android:layout_width="150dp"
android:layout_height="150dp"/>

<TextView
android:id="@+id/blue"
android:layout_gravity="center"
android:layout_width="100dp"
android:layout_height="100dp"/>

<TextView
android:id="@+id/purple"
android:layout_gravity="center"
android:layout_width="50dp"
android:layout_height="50dp"/>

</FrameLayout>
----------------------------------------------------------------------------------------
//(value)colors
<resources>
<color name="colorRed">#FF0000</color>
<color name="colorOrange">#FF8000</color>
<color name="colorYellow">#FFFF00</color>
<color name="colorGreen">#00FF00</color>
<color name="colorCyan">#00FFFF</color>
<color name="colorBlue">#0000FF</color>
<color name="colorPurple">#8000FF</color>
</resources>
----------------------------------------------------------------------------------------
//MainActivity
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

private static final int COLORCHANGE = 1;
private int currentColor = 0;
private TextView[] mTextViews;
private Timer mTimer;
private int[] mColors;
private int[] mIds;

private Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case COLORCHANGE:
// 更改颜色
for(int i = 0 ; i < mColors.length ; i++){
mTextViews[i].setBackgroundResource(mColors[ (i + currentColor) % mColors.length]);
}
currentColor++;
break;
}
super.handleMessage(msg);
}
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}

public void initView(){
mColors = new int[]{
R.color.colorRed,
R.color.colorOrange,
R.color.colorYellow,
R.color.colorGreen,
R.color.colorCyan,
R.color.colorBlue,
R.color.colorPurple
};

mIds = new int[]{
R.id.red,
R.id.orange,
R.id.yellow,
R.id.green,
R.id.cyan,
R.id.blue,
R.id.purple
};

mTextViews = new TextView[mColors.length];
for (int i = 0; i < mColors.length ; i++){
mTextViews[i] = (TextView) findViewById(mIds[i]);
}
}

public void initData(){
Timer timer = new Timer();
// 三个参数含义:定时执行的任务/第一次多久后执行/每隔多久执行
timer.schedule(new TimerTask() {
@Override
public void run() {
// 发送消息 让UI线程更改UI
mHandler.sendEmptyMessage(COLORCHANGE);
}
},0,100);
}
}

4，计算器布局界面

  熟悉表格布局的表示形式

//(layout)activity_main
<!--指定计算机的总体布局是6行4列-->
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="6"
android:columnCount="4"
tools:context="com.test.gridlayout.MainActivity">

<!-- TextView横跨4列 -->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_columnSpan="4"
android:gravity="center_vertical"
android:text="0"
android:textSize="60sp"
android:textColor="#000"
android:background="#EEEEEE"
android:paddingLeft="10dp"/>

<!-- Button横跨4列 -->
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_columnSpan="4"
android:text="清除"
android:textSize="30sp"
android:textColor="#000"/>

</GridLayout>
----------------------------------------------------------------------------------------
//MainActivity
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.widget.Button;
import android.widget.GridLayout;

public class MainActivity extends AppCompatActivity {
private Context mContext = MainActivity.this;
private GridLayout mGridLayout;
private String[] mChars;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}

public void initView(){
mGridLayout = (GridLayout) findViewById(R.id.gridlayout);
mChars = new String[]{"7" ,"8" ,"9" ,"÷" ,
"4" ,"5" ,"6" ,"×" ,
"1" ,"2" ,"3" ,"-" ,
"." ,"0" ,"=" ,"+" };
}

public void initData(){
for(int i = 0 ; i < mChars.length ; i++){
Button button = new Button(mContext);
// 循环设置文字内容
button.setText(mChars[i]);
button.setTextSize(50);
// 循环按钮摆放位置
// 在TextView和Button后指定Button所在的行
GridLayout.Spec rowSpec = GridLayout.spec(i / 4 + 2);
// 指定Button所在的列
GridLayout.Spec columnSoec = GridLayout.spec(i % 4);
GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams(rowSpec , columnSoec);
// 左上及中间的形状不变,右下布局以填满GridLayout为宗旨
layoutParams.setGravity(Gravity.FILL);
mGridLayout.addView(button , layoutParams);
}
}
}