关于智能家居主界面，通话记录界面设计的相关问题（ViewPager以及自定view）

家居和通话记录的设计界面，由于虚拟器的大小问题，截图效果不是很理想，在真机上调试已成功。

                                                                                                               

       

家居方面：

在setContentView(R.layout.activity_main);中设计界面

要点：在<RelativeLayout>中添加<LinearLayout>布局更好的控制界面位置效果

BUG：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:itbutton="http://schemas.android.com/apk/res/com.example.smart"    //引入对应的包名（主包名）否则会引起错误
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/common_bg"  > 

<com.example.smart.framework.ImageTextButton     //自定义view，注意对应包名
            android:id="@+id/fangjian"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="bottom|center_horizontal"
            itbutton:image="0"
            itbutton:title="@string/fangjian" />

自定义View的具体内容如下：

1.数组封装要数据

2.加载动态界面LayoutInflater.from(context).inflate

3.在自定义view的代码中引入自定义属性，修改构造函数

context通过调用obtainStyledAttributes方法来获取一个TypeArray，然后由该TypeArray来对属性进行设置

public class ImageTextButton extends RelativeLayout {
private ImageView imgView;
private TextView textView;
private final int[] imgId= {R.drawable.btn_fangjian,R.drawable.btn_scene,R.drawable.btn_zhuye,
R.drawable.btn_shipin,R.drawable.btn_anfang};


public ImageTextButton(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

    public ImageTextButton(Context context,AttributeSet attributeSet) {
        super(context, attributeSet);
        
        LayoutInflater.from(context).inflate(R.layout.view_imagetext_button, this,true);
        
        this.imgView = (ImageView)findViewById(R.id.myviewimg);
        this.textView = (TextView)findViewById(R.id.myviewtext1);
        
        TypedArray a = context.obtainStyledAttributes(attributeSet,R.styleable.ImageTextButton);
        String title = a.getString(R.styleable.ImageTextButton_title);
        
        this.textView.setText(title);
        int imgid = a.getInt(R.styleable.ImageTextButton_image, 0);
        this.imgView.setImageResource(imgId[imgid]);
        
        this.setClickable(true);
        this.setFocusable(true);
    }
    
    public void setImgResource(int resourceID) {
        this.imgView.setImageResource(resourceID);
    }
    
    public void setText(String text) {
        this.textView.setText(text);
    }
    
    public void setTextColor(int color) {
        this.textView.setTextColor(color);
    }
    
    public void setTextSize(float size) {
        this.textView.setTextSize(size);
    }
}

在设计中出现R.styleable.ImageTextButton无法找到的问题

解决如下：在values-attrs.xml中添加如下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageTextButton">
        <attr name="title" format="string" />
        <attr name="image" format="integer" />
    </declare-styleable>
    
    <declare-styleable name="KeyValueTextView">
        <attr name="entries" format="reference" />
        <attr name="values" format="reference" />
        <attr name="numeral" format="boolean" />
    </declare-styleable>
</resources>

<!--以上即完成了一个自定的View-->

ViewPager的动态滑动效果是在layout布局中添加控件完成的，如下：

 <android.support.v4.view.ViewPager         //谷歌提供的包
        android:id="@+id/fragmentmanager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/hompreview"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="@dimen/mainfragment_bottom" 
        android:flipInterval="30"  
        android:persistentDrawingCache="animation"
        />

<!--MainActivity中代码的填写-->

1.继承FragmentActivity和implements 监听事件和自定义的FragmentClickListener 事件(ZUI)

2.实现三个函数

initViewPaper();    //实现屏幕滑动显示对应界面的效果，添加适配器 mViewPager.setAdapter
   initView();     //分别获取自定义View中底层选择框的ID（住宅，场景，主页...）
    setSelected(0);     //在onClick（）函数中，case控件对应的setSelected(0)值  

                                       setSelected（）监听选择对应的控件

3.initViewPaper()中住宅界面的的列举，其他Activity同理可设

如下：

mViewPager = (ViewPager) findViewById(R.id.fragmentmanager);     //获取layout中viewpager的id
mFragmentList = new ArrayList<Fragment>(); //new一个数组
FragmentHome home = new FragmentHome();   //new一个显示主页界面函数的子函数   

mFragmentList.add(home);//添加到数组中

mViewPager.setAdapter(new FragmentPagerAdapter(
getSupportFragmentManager()) { //添加一个适配器

FragmentHome函数的代码具体如下(对应的解析顺序下拉对应)：

  1.声明监听FragmentClickListener 对象

2.View view = inflater.inflate(R.layout.home_fragment, container,false);

动态添加layout界面，与findViewById类似，findViewById是查找到具体控件。

3.ArrayList<ItemInfo> infoList = new ArrayList<ItemInfo>();

声明数组获取存储数据

4.class ItemInfo    用于get（）返回数据，set（）获取数据

private int imgId;
private String textStr;
private int type;
private String userId;  

声明私有变量，通过右键-source-Generate Getters and Setters可自动生成对应的get，set方法

5.GridView gridView = (GridView)view.findViewById(R.id.fragmentgridView);
   gridView.setAdapter(new MainGridViewAdapter(infoList, getActivity()));
   gridView.setOnItemClickListener(new OnItemClickListener()

获取布局中的gridview ID，

添加自定义适配器MainGridViewAdapter，

添加事件监听

<!--FragmentHome函数代码：--> 

public class FragmentHome extends Fragment {
private int Imageid[] = {R.drawable.icon_hom1,R.drawable.icon_hom2,R.drawable.icon_hom3,
R.drawable.icon_hom4,R.drawable.icon_home5};
private Resources mResources;
private FragmentClickListener mOnClickListener;


@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
}


@Override
public void onAttach(Activity activity) {
// TODO Auto-generated method stub

try {
mOnClickListener = (FragmentClickListener) activity;
} catch (Exception e) {
mOnClickListener = null;
}

super.onAttach(activity);
}


@Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.home_fragment, container,false);

mResources = getActivity().getResources();

int homeCount = 5;
ArrayList<ItemInfo> infoList = new ArrayList<ItemInfo>();
for (int i=0;i<homeCount;i++){
ItemInfo info = new ItemInfo();
info.setImgId(Imageid[i]);
info.setTextStr(mResources.getText(R.string.fangjian) + Integer.toString(i+1));
infoList.add(info);
}

GridView gridView = (GridView)view.findViewById(R.id.fragmentgridView);
gridView.setAdapter(new MainGridViewAdapter(infoList, getActivity()));
gridView.setOnItemClickListener(new OnItemClickListener() {


@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
if (mOnClickListener != null){
mOnClickListener.onFrgmentClick(FragmentClickListener.FRAGMENTCLICK_TYPE_HOME, null);
}

}
});

return view;
}


}

2.<!--home_fragment.XML-->

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


    <GridView
        android:id="@+id/fragmentgridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4" >
    </GridView>


</LinearLayout>

4.<!--class ItemInfo-->

public class ItemInfo {
private int imgId;
private String textStr;
private int type;
private String userId;

public int getImgId() {
return imgId;
}

public void setImgId(int imgId) {
this.imgId = imgId;
}

public String getTextStr() {
return textStr;
}

public void setTextStr(String textStr) {
this.textStr = textStr;
}

public int getType() {
return type;
}

public void setType(int type) {
this.type = type;
}

public String getUserId() {
return userId;
}

public void setUserId(String userId) {
this.userId = userId;
}

public enum InfoType{
fangjian,
scence,
zhuye,
shipin,
anfang
}
}

5.<!--添加自定义适配器MainGridViewAdapter-->

public class MainGridViewAdapter extends BaseAdapter {

private ArrayList<ItemInfo> mIteminfoList = new ArrayList<ItemInfo>();
private LayoutInflater inflater = null;

public MainGridViewAdapter(ArrayList<ItemInfo> list, Context context){
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

mIteminfoList.clear();
mIteminfoList.addAll(list);
}

public void listUpdate(ArrayList<ItemInfo> list){
mIteminfoList.clear();
mIteminfoList.addAll(list);
notifyDataSetChanged();
}


@Override
public int getCount() {
// TODO Auto-generated method stub
return mIteminfoList.size();
}


@Override
public Object getItem(int arg0) {
// TODO Auto-generated method stub
return mIteminfoList.get(arg0);
}


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


@Override
public View getView(int postion, View convertView, ViewGroup group) {
// TODO Auto-generated method stub
View view;

if (convertView == null){
view = inflater.inflate(R.layout.main_item, null);
}else{
view = convertView;
}

((ImageView)view.findViewById(R.id.itemimage)).setImageResource(mIteminfoList.get(postion).getImgId());
((TextView)view.findViewById(R.id.itemtext)).setText(mIteminfoList.get(postion).getTextStr());

return view;
}


}

<!--main_item.XML--> 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainitem"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<ImageView
        android:id="@+id/itemimage"
                android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/item_image_left"
        android:layout_marginRight="@dimen/item_image_right"
        android:layout_marginTop="@dimen/item_image_top"
        android:src="@drawable/icon_hom1" />
<TextView
        android:id="@+id/itemtext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/itemimage"
        android:gravity="center_horizontal"
        android:textColor="@color/mainitem_text" />


</RelativeLayout>

<!--MainActivity函数代码：--> 

public class MainActivity extends FragmentActivity implements OnClickListener,
FragmentClickListener {

private ImageTextButton mBhome, mBscene, mBhomepage, mBvideo, mBanfang;
private TextView mTtitle;
private ArrayList<Fragment> mFragmentList;
private ViewPager mViewPager;
private int mSelectId;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViewPaper();
initView();
setSelected(0);
}

@Override
protected void onPause() {
// TODO Auto-generated method stub
super.onPause();
}

@Override
protected void onResume() {
// TODO Auto-generated method stub
super.onResume();
}


@Override
protected void onDestroy() {
// TODO Auto-generated method stub
super.onDestroy();
}







public void initView() {
mBhome = (ImageTextButton) findViewById(R.id.fangjian);
mBhome.setOnClickListener(this);
mBscene = (ImageTextButton) findViewById(R.id.scene);
mBscene.setOnClickListener(this);
mBhomepage = (ImageTextButton) findViewById(R.id.zhuye);
mBhomepage.setOnClickListener(this);
mBvideo = (ImageTextButton) findViewById(R.id.shipin);
mBvideo.setOnClickListener(this);
mBanfang = (ImageTextButton) findViewById(R.id.anfang);
mBanfang.setOnClickListener(this);


mTtitle = (TextView) findViewById(R.id.titletext);
}


public void initViewPaper() {
mViewPager = (ViewPager) findViewById(R.id.fragmentmanager);


mFragmentList = new ArrayList<Fragment>();
FragmentHome home = new FragmentHome();
FragmentSence sence = new FragmentSence();
FragmentHomepage homepage = new FragmentHomepage();
FragmentVideo vido = new FragmentVideo();
FragmentAnfang anfang = new FragmentAnfang();
mFragmentList.add(home);
mFragmentList.add(sence);
mFragmentList.add(homepage);
mFragmentList.add(vido);
mFragmentList.add(anfang);




mViewPager.setAdapter(new FragmentPagerAdapter(
getSupportFragmentManager()) {


@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragmentList.size();
}


@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return mFragmentList.get(arg0);
}
});
mViewPager.setCurrentItem(0);
mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());


}

private void setSelected(int selectId) {
mSelectId = selectId;


if (selectId == 0) {
mBhome.setSelected(true);
mTtitle.setText(R.string.fangjian);
} else {
mBhome.setSelected(false);
}


if (selectId == 1) {
mBscene.setSelected(true);
mTtitle.setText(R.string.scene);
} else {
mBscene.setSelected(false);
}


if (selectId == 2) {
mBhomepage.setSelected(true);
mTtitle.setText(R.string.zhuye);
} else {
mBhomepage.setSelected(false);
}


if (selectId == 3) {
mBvideo.setSelected(true);
mTtitle.setText(R.string.shipin);
} else {
mBvideo.setSelected(false);
}


if (selectId == 4) {
mBanfang.setSelected(true);
mTtitle.setText(R.string.anfang);
} else {
mBanfang.setSelected(false);
}


mViewPager.setCurrentItem(selectId);
}

public void onClick(View view) {
// TODO Auto-generated method stub
int id = view.getId();

switch (id) {
case R.id.fangjian:
setSelected(0);
break;


case R.id.scene:
setSelected(1);
break;

case R.id.zhuye:
setSelected(2);
break;

case R.id.shipin:
setSelected(3);
break;

case R.id.anfang:
setSelected(4);
break;

default:
break;
}
}


public class MyOnPageChangeListener implements OnPageChangeListener {


@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub


}


@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub


}


@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
setSelected(arg0);
}
}







@Override
public void onFrgmentClick(int type, ItemInfo info) {
// TODO Auto-generated method stub


}



}