Android：SNS客户端开发五：发送微博界面设计

之前的我们已经通过OAuth认证，通过了新浪的授权并且取得了用户相关的信息。今天开始我们来发送一条微博试试。首先是发送微博界面的布局设计。先看布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/White"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/send_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@drawable/pre" >
        </ImageButton>

        <LinearLayout
            android:id="@+id/send_middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/send_right"
            android:layout_toRightOf="@id/send_left"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/newstatus"
                android:gravity="center" >
            </ImageButton>
        </LinearLayout>

        <ImageButton
            android:id="@+id/send_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/send" >
        </ImageButton>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <EditText
            android:id="@+id/editStatus"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="3dip"
            android:background="@color/White"
            android:gravity="top"
            android:hint="您想说点什么呢...">
        </EditText>

        <ImageView
            android:id="@+id/thumbImage"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:padding="3dip"
            android:layout_alignBottom="@id/editStatus"
            android:layout_alignLeft="@id/editStatus" />

        <TextView
            android:id="@+id/statusCount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/editStatus"
            android:layout_alignRight="@id/editStatus" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <GridView
            android:id="@+id/statusTool"
            android:layout_width="fill_parent"
            android:layout_height="30dip"
            android:background="@drawable/maintab_toolbar_bg"
            android:gravity="center"
            android:numColumns="4" >
        </GridView>
    </LinearLayout>

</LinearLayout>

我们为底部的GridView添加一个适配器，用来显示底部按钮相关内容

/*
 * 发送微博，评论，转发页面底部GridView工具栏Adapter
 */
public class BottomBarAdapter extends BaseAdapter{

	private ArrayList<HashMap<String,Object>> data;
	private Context context;
	private String[] menuNameArray;
	private int[] imageResourceArray;
	
	
	public BottomBarAdapter(String[] menuNameArray,
			int[] imageResourceArray, Context context){
		this.imageResourceArray = imageResourceArray;
		this.menuNameArray = menuNameArray;
		this.context = context;
	}
	
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return imageResourceArray.length;
	}

	@Override
	public Object getItem(int arg0) {
		// TODO Auto-generated method stub
		return imageResourceArray[arg0];
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		LayoutInflater flater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		convertView = flater.inflate(R.layout.bottombar, null);
		TextView textview = (TextView)convertView.findViewById(R.id.buttombarText);
		ImageView imageview = (ImageView)convertView.findViewById(R.id.buttombarImage);
	//	HashMap<String,Object> button = data.get(position);
		String name = menuNameArray[position];
		int pic = imageResourceArray[position];
		if(name!=""){
			textview.setText(name);
		}else{
			textview.setVisibility(View.GONE);
		}
		imageview.setImageResource(pic);
		return convertView;
	}

}

 接下来在addStatusActivity上我们来实现这个布局，并为GridView添加适配器

public class AddStatusActivity extends Activity {

	private Context context;
private GridView statusTool;
	/** 底部菜单图片 **/
	int[] detail_toolbar_image_array = { R.drawable.pic, R.drawable.at,
			R.drawable.topic, R.drawable.face };
	/** 底部菜单文字 **/
	String[] detail_toolbar_name_array = { "", "", "", "" };

	private final int TOOLBAR_ITEM_PIC = 0;// 图片
	private final int TOOLBAR_ITEM_AT = 1;// @
	private final int TOOLBAR_ITEM_TOPIC = 2;// 话题
	private final int TOOLBAR_ITEM_EMMOTION = 3;// 表情

protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.addstatus);
                                this.context = this;
		setView();

	}
/*
 * 建立视图
 */
	private void setView() {
	statusTool = (GridView) findViewById(R.id.statusTool);
	statusTool.setAdapter(new BottomBarAdapter(detail_toolbar_name_array,detail_toolbar_image_array, context));
	}
}

  注： 我们可以在布局文件中看到有一个id为thumbImage的ImageView，以及一个id为statusCount的TextView。这两个控件分别是用来显示在写微博时添加的图片，以及统计微博已经输入的字数。具体的实现方法将在后面的几篇博文中提到。我们先来看看效果图

评论

1 楼 jia15679 2012-03-23  

少个布局文件吧