安卓應用的界面編程(1)

    上學期做過一個java web的網站，初步瞭解了java寫網站後臺的流程，但是個人代碼的封裝性很差，完成後也沒有再去改動，這幾天會花時間整理一下把博客寫出來。

    最近開始學習android的開發，用的是android studio，由於AVD和genymotion都用不上，所以用的真機調試，昨天發現掛部落衝突用的夜神安卓模擬器也可以用來調試程式，方便了不少。

    最近就邊看邊學邊寫寫博客，感覺有點凌亂，慢慢應該會好。

android應有的所有UI組件都繼承了View類，View組件非常類似於Swing編程的JPanel，代表一個空白的矩形區域。

ViewGroup是一個重要的子類，通常作為其他組件的容器，主要當成容器類使用，由於是抽象類，實際中使用其子類作為容器，例如各種佈局管理器。

android的所有UI組件都是建立在View和ViewGroup基礎之上的。

ViewGroup容器控制其子組件的分佈依賴於ViewGroup.LayoutParams（子組件的佈局高度和寬度）/ViewGroup.MarginLayoutParams（頁邊距）

推薦使用XML佈局文件控制UI界面

！！正在app/src/main/res/layout目錄下定義一個主文件名任意的XML佈局文件後(R.java會自動收錄該佈局資源),java代碼可通過如下方法在Activity中顯示該視圖。

setContentView(R.layout.<資源文件名>);

或

findViewById(R.id.<android.id.屬性值>);

使用XML佈局文件和Java代碼混合控制UI界面

習慣上把變化小/行為比較固定的組件放在XML佈局文件中管理

變化較多/行為控制較複雜的交給Java代碼來管理

下麵是一個簡單圖片瀏覽器

首先在一個佈局文件中定義一個簡單的線性佈局容器

1 <!--定義線性佈局容器-->
2     <LinearLayout
3         xmlns:android="http://schemas.android.com/apk/res/android"
4         xmlns:tools="http://schemas.android.com/tools"
5         tools:context=".MainActivity"
6         android:id="@+id/root"
7         android:orientation="vertical"
8         android:layout_width="match_parent"
9         android:layout_height="match_parent"></LinearLayout>

下麵是該程式的實例代碼

當然首先要把圖片複製進app/res/drawable文件夾裡面

 1 public class MainActivity extends AppCompatActivity {
 2 
 3     //定義一個訪問圖片的數組
 4     int[] images = new int[]{
 5             R.drawable.java,
 6             R.drawable.javaee,
 7             R.drawable.swift,
 8     };
 9     int currentIma=0;
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.activity_main);
14         //獲取LinearLayout佈局容器
15         LinearLayout main=(LinearLayout) findViewById(R.id.root);
16         //程式創建ImageView組件
17         final ImageView image=new ImageView(this);
18         //將ImageView組件添加到LinearLayout佈局容器中
19         main.addView(image);
20         //初始化時顯示第一張圖片
21         image.setImageResource(images[0]);
22         image.setOnClickListener(new View.OnClickListener(){
23             @Override
24             public void onClick(View v){
25                 //改變ImageView里顯示的圖片
26                 image.setImageResource(images[++currentIma%images.length]);
27             }
28         });
29         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
30         setSupportActionBar(toolbar);
31 
32         FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
33         fab.setOnClickListener(new View.OnClickListener() {
34             @Override
35             public void onClick(View view) {
36                 Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
37                         .setAction("Action", null).show();
38             }
39         });
40     }
41 }

然後看了一下開發自定義View的內容

首先定義一個繼承View基類的子類，然後重寫View類的一個或多個方法

下麵是跟隨手指的小球的程式實例（只重寫了onDraw方法和onTouchEvent方法）

1.自定義組件DrawView.java

 1 public class DrawView extends View {
 2     public float currentX=40;
 3     public float currentY=50;
 4     //定義並創建畫筆
 5     Paint p = new Paint();
 6     public DrawView(Context context){
 7         super(context);
 8     }
 9     public DrawView(Context context,AttributeSet set){
10         super(context,set);
11     }
12     @Override
13     public void onDraw(Canvas canvas){
14        super.onDraw(canvas);
15         //設置畫筆的顏色
16         p.setColor(Color.RED);
17         //繪製一個小圓（作為小球）
18         canvas.drawCircle(currentX, currentY, 15, p);
19     }
20     //為該組件的碰觸事件重寫時間處理方法
21     @Override
22     public boolean onTouchEvent(MotionEvent event){
23         //修改currentX,currentY兩個屬性
24         currentX=event.getX();
25         currentY=event.getY();
26         //通知當前組件重繪自己
27         invalidate();
28         //返回true表明該處理方法已經處理該事件
29         return true;
30     }
31 }

2.Activity類

 1 super.onCreate(savedInstanceState);
 2         setContentView(R.layout.activity_main);
 3         /*
 4         //獲取佈局文件中的LinearLayout容器
 5         LinearLayout root=(LinearLayout)findViewById(R.id.root);
 6 
 7         //創建DrawView組件
 8         final DrawView draw=new DrawView(this);
 9         //設置自定義組件的最小寬度，高度
10         draw.setMinimumWidth(300);
11         draw.setMinimumHeight(500);
12         root.addView(draw);
13 */
14 }

附：如果在佈局文件中管理該組件

 1  <LinearLayout
 2         xmlns:android="http://schemas.android.com/apk/res/android"
 3         android:orientation="vertical"
 4         android:layout_width="match_parent"
 5         android:layout_height="match_parent"
 6         android:id="@+id/root">
 7         <mocking.com.followball.DrawView
 8             android:layout_width="match_parent"
 9             android:layout_height="match_parent" />
10     </LinearLayout>

則Activity類可以省去註釋的部分，效果圖如下。。新手入門