快捷方式Bar + ViewGroup - 自定义

TabActivity - 自定义

 

其实 这篇感觉极鸡肋 但是 TabActivity 在标签页太多情况下 会导致界面比较难看 所以今天尝试自己扩展一下

 

 

 

[原理]

 

用2 LinearLayout 完成之 一个用于存放Image 另一用于显示具体布局

 

可能有人会说 干嘛不用Gallery组件 显示Image  这是因为Gallery显示特性比较固定 只能水平显示 或者是我不知道 有知道的 望告知

 

 

 

[代码 步骤]

 

1. 定义布局：main.xml 其中 shortcut显示图片索引 info显示选择id content显示布局内容

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<LinearLayout  
	android:orientation="vertical"
    android:layout_width="50dip" 
    android:layout_height="wrap_content" 
    android:background="@drawable/dot"
    android:id="@+id/shortcut"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/info"
    />
</LinearLayout>
<LinearLayout  
	android:orientation="vertical"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingLeft="10dip"
    android:id="@+id/content"
    >
</LinearLayout>
</LinearLayout>

 

 

 

2. 定义List 用于存放各个标签布局

 

List<View> viewList;

 

 

3. View初始化

 

 

public void init(){
    	shortcutLinear = (LinearLayout)findViewById(R.id.shortcut);
    	contentLinearLayout = (LinearLayout)findViewById(R.id.content);
    	infoText = (TextView)findViewById(R.id.info);
    	
    	viewList = new ArrayList<View>();
    	
    	inflatorHelper = this.getLayoutInflater();
    }

 

 

4. 定义addTab() 用于接受图标索引 布局文件

 

public void addTab(int id,Drawable drawable,View view){
    	//1. to add ImageView into shortcut LinearLayout
    	ImageView iv = new ImageView(this);
    	iv.setImageDrawable(drawable);
    	shortcutLinear.addView(iv, id);
    	
    	//2. to add View into List<View>
    	viewList.add(id,view);
    }
    
    public void addTab(Drawable drawable,View view){
    	//1. to add ImageView into shortcut LinearLayout
    	ImageView iv = new ImageView(this);
    	iv.setImageDrawable(drawable);
    	shortcutLinear.addView(iv);
    	
    	//2. to add View into List<View>
    	viewList.add(view);
    }

 

 

5.  如何添加标签页

 

 

public void addExampleView(){
    	ImageView image = new ImageView(this);
    	image.setImageResource(R.drawable.robot);
    	addTab(this.getResources().getDrawable(R.drawable.icon),image);
    	
    	EditText edit = new EditText(this);
    	edit.setWidth(100);
    	addTab(1,this.getResources().getDrawable(R.drawable.hat),edit);
    	
    	TextView text = new TextView(this);
    	text.setText("Hello ~ Text!");
    	addTab(this.getResources().getDrawable(R.drawable.wyj),text);
    	
    	View panel1 = inflatorHelper.inflate(R.layout.panel1, null);
    	addTab(1,getResources().getDrawable(R.drawable.robot),panel1);
    }

 

 

 

6.  定义addClickListener()  用于注册LinearLasyout 所有ImageView

 

public void addClickListener(){
    	clickListener = new OnClickListener(){
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				int id = v.getId();
				
				infoText.setText(" id:"+id);
				
				//to remove all ori View, and then add new View
				contentLinearLayout.removeAllViews();
				if(id < viewList.size()){
					contentLinearLayout.addView(viewList.get(id));
				}
			}
    		
    	};
    	
    	for(int i=1;i<shortcutLinear.getChildCount();i++){
    		ImageView iv = (ImageView)shortcutLinear.getChildAt(i);
    		iv.setId(i);
    		
    		iv.setOnClickListener(clickListener);
    	}
    }

 

 

 

7.  panel1.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"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="name:"
    />
<EditText  
    android:layout_width="200dip" 
    android:layout_height="wrap_content" 
    />
<Button  
    android:layout_width="100dip" 
    android:layout_height="wrap_content" 
    android:text="OK"
    />
</LinearLayout>

 

 

8. emulator 运行截图：

 

 

 

 

 

 

 

 

评论

1 楼 petitlen 2010-06-12  

好文！这种扩展灵活又美观！