安卓应用的界面编程(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代码来管理

下面是一个简单图片浏览器

首先在一个布局文件中定义一个简单的线性布局容器

<!--定义线性布局容器-->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity"
        android:id="@+id/root"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></LinearLayout>

下面是该程序的实例代码

当然首先要把图片复制进app/res/drawable文件夹里面

public class MainActivity extends AppCompatActivity {

    //定义一个访问图片的数组
    int[] images = new int[]{
            R.drawable.java,
            R.drawable.javaee,
            R.drawable.swift,
    };
    int currentIma=0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取LinearLayout布局容器
        LinearLayout main=(LinearLayout) findViewById(R.id.root);
        //程序创建ImageView组件
        final ImageView image=new ImageView(this);
        //将ImageView组件添加到LinearLayout布局容器中
        main.addView(image);
        //初始化时显示第一张图片
        image.setImageResource(images[0]);
        image.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                //改变ImageView里显示的图片
                image.setImageResource(images[++currentIma%images.length]);
            }
        });
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }
}

然后看了一下开发自定义View的内容

首先定义一个继承View基类的子类，然后重写View类的一个或多个方法

下面是跟随手指的小球的程序实例（只重写了onDraw方法和onTouchEvent方法）

1.自定义组件DrawView.java

public class DrawView extends View {
    public float currentX=40;
    public float currentY=50;
    //定义并创建画笔
    Paint p = new Paint();
    public DrawView(Context context){
        super(context);
    }
    public DrawView(Context context,AttributeSet set){
        super(context,set);
    }
    @Override
    public void onDraw(Canvas canvas){
       super.onDraw(canvas);
        //设置画笔的颜色
        p.setColor(Color.RED);
        //绘制一个小圆（作为小球）
        canvas.drawCircle(currentX, currentY, 15, p);
    }
    //为该组件的碰触事件重写时间处理方法
    @Override
    public boolean onTouchEvent(MotionEvent event){
        //修改currentX,currentY两个属性
        currentX=event.getX();
        currentY=event.getY();
        //通知当前组件重绘自己
        invalidate();
        //返回true表明该处理方法已经处理该事件
        return true;
    }
}

2.Activity类

super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*
        //获取布局文件中的LinearLayout容器
        LinearLayout root=(LinearLayout)findViewById(R.id.root);

        //创建DrawView组件
        final DrawView draw=new DrawView(this);
        //设置自定义组件的最小宽度，高度
        draw.setMinimumWidth(300);
        draw.setMinimumHeight(500);
        root.addView(draw);
*/
}

附：如果在布局文件中管理该组件

 <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/root">
        <mocking.com.followball.DrawView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

则Activity类可以省去注释的部分，效果图如下。。新手入门