人人网SDK Demo项目学习 2 r界面学习

人人的界面是仿 iphone 其实也是仿fb的

这个都不是讨论的东西 很多客户就是要iphone的你也没办法.

1.主界面

标题栏有些变化 这是在代码中动态实现的

// 左边的返回按钮不显示
		titlebarLeftButton.setVisibility(View.GONE);
		// 设置标题
		titlebarText.setText("登录");

然后是主界面 用用的LinnerLayout布局内含按钮 ,

<?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/main_bg"
    android:orientation="vertical" >

    <!-- Logo -->

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="15dip"
        android:src="@drawable/renren_login_logo" />

    <!-- Upload Photo Without Login -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingLeft="40dip"
        android:paddingRight="40dip"
        android:paddingTop="10dip" >

        <Button
            android:id="@+id/renren_demo_upload_photo_without_login"
            android:layout_width="fill_parent"
            android:layout_height="40dip"
            android:layout_marginBottom="12dip"
            android:background="@drawable/auth_button_bg"
            android:gravity="center"
            android:text="一键上传照片" />
    </LinearLayout>

    <!-- auth buttons -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingBottom="20dip"
        android:paddingLeft="40dip"
        android:paddingRight="40dip"
        android:paddingTop="20dip" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:paddingBottom="5dip"
            android:text="@string/login_hint"
            android:textColor="@color/login_hint_text" />

        <Button
            android:id="@+id/auth_site_mode"
            android:layout_width="fill_parent"
            android:layout_height="40dip"
            android:layout_marginBottom="12dip"
            android:background="@drawable/auth_button_bg"
            android:gravity="center"
            android:text="@string/auth_site_mode" />

        <Button
            android:id="@+id/sso_mode"
            android:layout_width="fill_parent"
            android:layout_height="40dip"
            android:layout_marginBottom="12dip"
            android:background="@drawable/auth_button_bg"
            android:gravity="center"
            android:text="@string/sso_mode" />

        <Button
            android:id="@+id/password_flow_mode"
            android:layout_width="fill_parent"
            android:layout_height="40dip"
            android:background="@drawable/auth_button_bg"
            android:gravity="center"
            android:text="@string/password_flow_mode" />
    </LinearLayout>

    <!-- footer -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:gravity="center_horizontal"
            android:paddingBottom="20dip"
            android:text="@string/copyright"
            android:textColor="@color/copyright_info" />
    </LinearLayout>

</LinearLayout>

他这里有个小问题,下面的版权声明应该是放在最下面的可惜

 android:paddingBottom="20dip"

好像不能支持LinnerLayout.需要使用Relativelayout.

修改如下

  <!-- footer -->
   <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >


        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            android:paddingBottom="20dip"
            android:text="@string/copyright"
            android:textColor="@color/copyright_info" />
    </RelativeLayout>

效果

他还有个小问题是按钮用的是.9png 做的,但是这种单调的效果其实可以使用xml描述,可能做法不同吧 ,大家自行决定

然后是api列表界面

这个是用代码+xml做的 承载于一个listview中

item

<?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="wrap_content"
    android:background="#FFFFFF"
    android:clickable="true"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/api_group_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/api_group_title_bg"
        android:textColor="@color/api_group_title_text" >
    </TextView>

    <RelativeLayout
        android:id="@+id/api_info"
        android:layout_width="fill_parent"
        android:layout_height="45dip" >

        <TextView
            android:id="@+id/api_label"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:gravity="center_vertical"
            android:paddingLeft="10dip"
            android:textColor="@color/api_item_label"
            android:textSize="16sp" >
        </TextView>

        <ImageView
            android:id="@+id/api_img"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dip"
            android:src="@drawable/api_item_arrow" />

        <TextView
            android:id="@+id/api_name"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginRight="10dip"
            android:layout_toLeftOf="@id/api_img"
            android:gravity="center_vertical"
            android:textColor="@color/api_item_name"
            android:textSize="12sp" />
    </RelativeLayout>

</LinearLayout>

实现这种可以分类的listview 需要两个实体

实体   >标题

   >栏目1

   >栏目2

  ....

如图

第一个实体有一个title和一个list承载下面的内容

第二个实体储存每一个栏目的信息 包括api名字和方法

这是有tilte的

/**
 * $id$
 */
package com.renren.api.connect.android.demo.activity;

import java.util.ArrayList;

/**
 * A group of api items in the same category
 * @author Shaofeng Wang (shaofeng.wang@renren-inc.com)
 */
public class ApiItemGroup {//group中有一个title 一个title下面有个arraylist 就是分类显示的效果了.
	private String title;
	
	private ArrayList<ApiItem> apiItems;
	
	public ApiItemGroup(String title) {
		this.title = title;
		this.apiItems = new ArrayList<ApiItem>();
	}
	
	public ApiItemGroup(String title, ArrayList<ApiItem> apiItems) {
		this.title = title;
		this.apiItems = apiItems;
	}
	
	public synchronized ArrayList<ApiItem> addApiItem(ApiItem apiItem) {
		if(apiItem != null) {
			apiItems.add(apiItem);
		}
		return apiItems;
	}
	
	public String getTitle() {
		return title;
	}
	
	/**
	 * Get the api item list
	 * @return
	 */
	public final ArrayList<ApiItem> getApiItems() {
		return apiItems;
	}
}

这是子内容

/**
 * $id$有
 */
package com.renren.api.connect.android.demo.activity;

/**
 * An item in the api list
 * @author Shaofeng Wang (shaofeng.wang@renren-inc.com)
 */
public class ApiItem {
	
	private String label;
	
	private String name;
	/**
	 * The name for invoking
	 */
	public String invokeName;
	
	public String getLabel() {
		return label;
	}

	public String getName() {
		return name;
	}

	public String getInvokeName() {
		return invokeName;
	}

	public ApiItem(String label, String name, String invokeName){
		this.label = label;
		this.name = name;
		this.invokeName = invokeName;
	}
}

我们思考一下他的adpter在getView方法中 首先要获取这个group的实体,获取下来后把title填充到item 然后去除子项 list 进行遍历,然后用代码把他加到item中,adapter就可以显示到listview中了

/**
 * $id$
 */
package com.renren.api.connect.android.demo.activity;

import java.util.ArrayList;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.renren.api.connect.android.demo.ApiDemoInvoker;
import com.renren.api.connect.android.demo.R;

/**
 * The adapter for api list
 * 
 * @author Shaofeng Wang (shaofeng.wang@renren-inc.com)
 */
public class ApiListAdapter extends BaseAdapter {

	private ArrayList<ApiItemGroup> apiGroups;

	private Activity activity;

	public ApiListAdapter(Activity activity, ArrayList<ApiItemGroup> apiGroups) {
		super();
		this.activity = activity;
		this.apiGroups = apiGroups;
	}

	@Override
	public int getCount() {
		if (apiGroups != null) {
			return apiGroups.size();
		}
		return 0;
	}

	@Override
	public Object getItem(int position) {
		if (apiGroups != null && position >= 0 && position < apiGroups.size()) {
			return apiGroups.get(position);
		}
		return null;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {

		if (apiGroups != null && position >= 0 && position < apiGroups.size()) {
			// 设置title
			ApiItemGroup group = apiGroups.get(position);
			LinearLayout apiItemGroup = (LinearLayout) LayoutInflater.from(
					parent.getContext()).inflate(R.layout.api_item_group, null);
			View titleView = LayoutInflater.from(activity).inflate(
					R.layout.api_list_item, null);
			TextView titleGroupTitle = (TextView) titleView
					.findViewById(R.id.api_group_title);
			View infoView = (View) titleView.findViewById(R.id.api_info);
			infoView.setVisibility(View.GONE);
			titleGroupTitle.setText(group.getTitle());
			apiItemGroup.addView(titleView);
			// 添加子项
			ArrayList<ApiItem> apiItems = group.getApiItems();
			for (final ApiItem item : apiItems) {// 填充title下面的内容
				View itemView = LayoutInflater.from(activity).inflate(
						R.layout.api_list_item, null);
				TextView groupTitle = (TextView) itemView
						.findViewById(R.id.api_group_title);
				TextView apiLabel = (TextView) itemView
						.findViewById(R.id.api_label);
				TextView apiName = (TextView) itemView
						.findViewById(R.id.api_name);
				apiLabel.setText(item.getLabel());
				apiName.setText(item.getName());
				groupTitle.setVisibility(View.GONE);
				itemView.setOnClickListener(new View.OnClickListener() {

					@Override
					public void onClick(View v) {
						ApiDemoInvoker.invoke(activity, item.getInvokeName());
					}
				});

				apiItemGroup.addView(itemView);
			}

			convertView = apiItemGroup;
		}
		return convertView;
	}

}

然后是在Activity中填充数据了

/**
 * $id$
 */
package com.renren.api.connect.android.demo.activity;

import java.util.ArrayList;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ListView;

import com.renren.api.connect.android.demo.R;

/**
 * API List
 * 
 * @author Shaofeng Wang (shaofeng.wang@renren-inc.com)
 */
public class ApiListActivity extends BaseActivity {

	private LinearLayout apiListLayout;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		apiListLayout = (LinearLayout) getLayoutInflater().inflate(
				R.layout.api_list, null);
		root.addView(apiListLayout);
		initApiList();

		// 设置标题栏左边按钮
		titlebarLeftButton.setText(getString(R.string.logout));
		titlebarLeftButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				renren.logout(ApiListActivity.this);
				ApiListActivity.this.finish();
			}
		});
		// 设置按钮背景图片
		titlebarLeftButton
				.setBackgroundResource(R.drawable.renren_demo_titlebar_right_button);

		// 设置标题栏文字
		titlebarText.setText(renren.getSessionKey().substring(0, 10) + "...");
	}

	/**
	 * Initialize the api list
	 */
	private void initApiList() {
		ArrayList<ApiItemGroup> groups = new ArrayList<ApiItemGroup>();
		// User info api group
		ApiItemGroup userInfoGroup = new ApiItemGroup(
				getString(R.string.user_info_group));//用户信息分类
		userInfoGroup.addApiItem(new ApiItem(getString(R.string.albums_info),
				getString(R.string.albums_info_api),//添加每个item的两个值
				getString(R.string.albums_info_invoke)));
		userInfoGroup.addApiItem(new ApiItem(getString(R.string.users_getinfo),
				getString(R.string.users_getinfo_api),
				getString(R.string.users_getinfo_invoke)));
		userInfoGroup.addApiItem(new ApiItem(getString(R.string.friends_get),
				getString(R.string.friends_get_api),
				getString(R.string.friends_get_invoke)));
		userInfoGroup.addApiItem(new ApiItem(
				getString(R.string.friends_get_friends),
				getString(R.string.friends_get_friends_api),
				getString(R.string.friends_get_friends_invoke)));
		groups.add(userInfoGroup);//添加到group中去等待放入adapter

		// Publish content group
		ApiItemGroup publishGroup = new ApiItemGroup(
				getString(R.string.publish_group));
		publishGroup.addApiItem(new ApiItem(getString(R.string.publish_status),
				getString(R.string.publish_status_api),
				getString(R.string.publish_status_invoke)));
		publishGroup.addApiItem(new ApiItem(getString(R.string.publish_feed),
				getString(R.string.publish_feed_api),
				getString(R.string.publish_feed_invoke)));
		publishGroup.addApiItem(new ApiItem(getString(R.string.publish_photo),
				getString(R.string.publish_photo_api),
				getString(R.string.publish_photo_invoke)));
		publishGroup.addApiItem(new ApiItem(getString(R.string.create_album),
				getString(R.string.create_album_api),
				getString(R.string.create_album_invoke)));
		groups.add(publishGroup);

		// one-click api group
		ApiItemGroup oneClickGroup = new ApiItemGroup(
				getString(R.string.one_click_publish_group));
		oneClickGroup.addApiItem(new ApiItem(
				getString(R.string.one_click_status),
				getString(R.string.one_click_status_api),
				getString(R.string.one_click_status_invoke)));
		oneClickGroup.addApiItem(new ApiItem(
				getString(R.string.one_click_photo),
				getString(R.string.one_click_photo_api),
				getString(R.string.one_click_photo_invoke)));
		groups.add(oneClickGroup);

		// dialog api group
		ApiItemGroup dialogGroup = new ApiItemGroup(
				getString(R.string.dialog_group));
		dialogGroup.addApiItem(new ApiItem(getString(R.string.dialog_feed),
				getString(R.string.dialog_feed),
				getString(R.string.dialog_feed_invoke)));
		dialogGroup.addApiItem(new ApiItem(getString(R.string.dialog_status),
				getString(R.string.dialog_status),
				getString(R.string.dialog_status_invoke)));
		groups.add(dialogGroup);

		ApiItemGroup extensionsGroup = new ApiItemGroup(
				getString(R.string.extensions_group));
		extensionsGroup.addApiItem(new ApiItem(
				getString(R.string.extensions_pay),
				getString(R.string.extensions_pay_api),
				getString(R.string.extensions_pay_invoke)));
		groups.add(extensionsGroup);
		
		// add to api list
		ApiListAdapter adapter = new ApiListAdapter(this, groups);
		ListView apiList = (ListView) apiListLayout.findViewById(R.id.api_list);
		apiList.setFadingEdgeLength(0);
		apiList.setAdapter(adapter);
	}
}

基本上可以学习的就这些了 

还有一点 大家可能都知道 但是我也是听说过没见过 就是使用layout-land这个文件夹放竖屏时需要显示的布局文件