安卓应用的界面编程(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代码来管理
下面是一个简单图片浏览器
首先在一个布局文件中定义一个简单的线性布局容器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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文件夹里面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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类
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
附:如果在布局文件中管理该组件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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类可以省去注释的部分,效果图如下。。新手入门