Android 界面心得

初学者，有错欢迎指点。

最近在做一个Android开发小项目，小有体会，写下来与大家分享。

如果大家是看书学习Android的话，都知道Android的各种布局，对象。可是光凭借那些是远远不能做出各种好看的界面的。经过多番搜索，终于明白了其中的奥妙。

首先，各种布局是可以嵌套的，这样，就可以实现许多复杂的布局，就如同tablelayout中添加tablerow一样，相对布局中可以加各种小布局。例子如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/login"
        android:textSize="80sp" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:text="@string/more" />

    <TableLayout
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="24dp" >

        <TableRow
            android:id="@+id/tableRow6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/sell" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/buy" />
        </TableRow>

        <View                               
        android:layout_height="2dip" 
        android:background="#F00" /> 

        <TableRow
            android:id="@+id/tableRow7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/ISell" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/IBuy" />
        </TableRow>

    </TableLayout>

</RelativeLayout>

效果如图：

因为采用各种布局嵌套，在变成横屏，或者在大屏上都不会变的奇怪。

当然我们甚至可以自己构造自己需要的东西，我之前需要的是一个带图标和文字的Button，但是没有，只有单独带图标的或者单独带文字的。所以需要我们自己写一个有文字有图标的类。我用到的如下：

package com.example.sell;

import com.example.eeyes.R;
import android.content.Context; 
import android.view.LayoutInflater;
import android.widget.ImageView; 
import android.widget.TableRow;
import android.widget.TextView; 
 
//自定义ImageButton，模拟ImageButton，并在其右方显示文字 
//提供Button的部分接口 
public class myButton extends TableRow{ 
 
  public myButton(Context context, int imageResId, int textResId) { 
    super(context); 
    LayoutInflater.from(context).inflate(R.layout.list1, this, true);
    mButtonImage = (ImageView)findViewById(R.id.imageView1);
    mButtonText =  (TextView)findViewById(R.id.textView1);
    setImageResource(imageResId); 
    setText(textResId); 
    setTextColor(0xFF000000); 
 
    //设置本布局的属性 
    setClickable(true);  //可点击 
    setFocusable(true);  //可聚焦 
    setBackgroundResource(android.R.drawable.btn_default);  //布局才用普通按钮的背景 
  } 
 
  // ----------------public method----------------------------- 
  /* 
   * setImageResource方法 
   */ 
  public void setImageResource(int resId) { 
    mButtonImage.setImageResource(resId); 
  } 
 
  /* 
   * setText方法 
   */ 
  public void setText(int resId) { 
    mButtonText.setText(resId); 
  } 
 
  public void setText(CharSequence buttonText) { 
    mButtonText.setText(buttonText); 
  } 
 
  /* 
   * setTextColor方法 
   */ 
  public void setTextColor(int color) { 
    mButtonText.setTextColor(color); 
  } 
 
  // ----------------private attribute----------------------------- 
  private ImageView mButtonImage = null; 
  private TextView mButtonText = null; 
} 

用到的XML如下：

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</TableRow>

使用后效果如下：

附实现代码：

package com.example.sell;
import com.example.eeyes.R;

import android.app.Activity; 
import android.content.Intent;
import android.os.Bundle; 
import android.view.View; 
import android.widget.Button; 
import android.widget.LinearLayout; 
 
public class sells extends Activity { 
  /** Called when the activity is first created. */ 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.sells); 
    btDataConfig1 = new myButton(this, R.drawable.ic_launcher, R.string.math); 
    //获取包裹本按钮的容器
    llbtDataConfig1 = (LinearLayout) findViewById(R.id.tableRow1); 
    //将我们自定义的Button添加进这个容器
    llbtDataConfig1.addView(btDataConfig1); 
    //设置按钮的监听
    btDataConfig1.setOnClickListener(new Button.OnClickListener() { 
    	@Override
    	public void onClick(View v) { 
    		Intent intent=new Intent(sells.this,Sell.class);
			startActivity(intent);
    		} 
    	}); 
    btDataConfig2 = new myButton(this, R.drawable.ic_launcher, R.string.language); 
    //获取包裹本按钮的容器
    llbtDataConfig2 = (LinearLayout) findViewById(R.id.tableRow2); 
    //将我们自定义的Button添加进这个容器
    llbtDataConfig2.addView(btDataConfig2); 
    //设置按钮的监听
    btDataConfig2.setOnClickListener(new Button.OnClickListener() { 
    	@Override
    	public void onClick(View v) { 
    		btDataConfig2.setText("按钮被点击过了"); 
    		} 
    	}); 
    btDataConfig3 = new myButton(this, R.drawable.ic_launcher, R.string.english); 
    //获取包裹本按钮的容器
    llbtDataConfig3 = (LinearLayout) findViewById(R.id.tableRow3); 
    //将我们自定义的Button添加进这个容器
    llbtDataConfig3.addView(btDataConfig3); 
    //设置按钮的监听
    btDataConfig3.setOnClickListener(new Button.OnClickListener() { 
    	@Override
    	public void onClick(View v) { 
    		btDataConfig3.setText("按钮被点击过了"); 
    		} 
    	}); 
    btDataConfig4 = new myButton(this, R.drawable.ic_launcher, R.string.fun); 
    //获取包裹本按钮的容器
    llbtDataConfig4 = (LinearLayout) findViewById(R.id.tableRow4); 
    //将我们自定义的Button添加进这个容器
    llbtDataConfig4.addView(btDataConfig4); 
    //设置按钮的监听
    btDataConfig4.setOnClickListener(new Button.OnClickListener() { 
    	@Override
    	public void onClick(View v) { 
    		btDataConfig4.setText("按钮被点击过了"); 
    		} 
    	}); 
    btDataConfig5 = new myButton(this, R.drawable.ic_launcher, R.string.other); 
    //获取包裹本按钮的容器
    llbtDataConfig5 = (LinearLayout) findViewById(R.id.tableRow5); 
    //将我们自定义的Button添加进这个容器
    llbtDataConfig5.addView(btDataConfig5); 
    //设置按钮的监听
    btDataConfig5.setOnClickListener(new Button.OnClickListener() { 
    	@Override
    	public void onClick(View v) { 
    		btDataConfig5.setText("按钮被点击过了"); 
    		} 
    	}); 
    } 
  private LinearLayout llbtDataConfig1 = null;  //main布局中包裹本按钮的容器
  private myButton btDataConfig1 = null; 
  private LinearLayout llbtDataConfig2 = null;
  private myButton btDataConfig2 = null; 
  private LinearLayout llbtDataConfig3 = null;
  private myButton btDataConfig3 = null;
  private LinearLayout llbtDataConfig4 = null;
  private myButton btDataConfig4= null;
  private LinearLayout llbtDataConfig5 = null;
  private myButton btDataConfig5 = null;
  }

XML文件：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
 
    <!-- 这就是我们的“数据管理按钮” -->

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>

    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TableRow>
 
</LinearLayout> 

好了，有着两个例子，我想绝大部分的样子我们都可以自己做出来了。

github上有上面的源代码，名称eeyes。

谢谢我之前看的其他人的博客。