题外话了:学习写一写博客,一方面是在工作一天后记录分享一下当天比较重要的事情,另一方面是不断的学习,回顾。
今天打算写的是一个简单的界面布局,这种布局在手机中可能是很少见,有些俗套和老土,表达不能很清楚,还是看一下图吧,红色虚线框中为主要功能布局,实现这种布局。
简单说明一下,每一页最多显示八个功能块(可以自定义),一行四个,超过四个自然就换“另一行”了,多于八个的自动分页,可以通过滑动显示,最下面是导航,定位在哪一个页面。主要实现是通过ViewPager,不断向里面添加view,实现“块”的功能。分析一个页面:看图吧
黑色边框的代表最外层的布局,红色边框代表上下两个布局,绿色边框则代表要添加的功能块。直接上代码吧
public class MainActivity extends Activity {
private ViewPager viewPager;
private List
list;
private LayoutInflater inflater;
private LayoutParams params;
private LinearLayout pointGruop;
int width;
int height;
private LinearLayout lins;
private TextView itemText;
private ImageView itemImage;
private Integer[] backDrawables = { R.drawable.app_selector_1,
R.drawable.app_selector_2, R.drawable.app_selector_3,
R.drawable.app_selector_2, R.drawable.app_selector_3,
R.drawable.app_selector_2, R.drawable.app_selector_3,
R.drawable.app_selector_2, R.drawable.app_selector_3 };
final Integer[] text_item_list = { R.string.withDraw_money,
R.string.balance_query, R.string.statistics,
R.string.withDraw_money, R.string.balance_query,
R.string.statistics, R.string.withDraw_money,
R.string.balance_query, R.string.statistics, };
final Integer[] img_item_list = { R.drawable.icon_qk,
R.drawable.icon_chaxun, R.drawable.icon_yecx, R.drawable.icon_qk,
R.drawable.icon_chaxun, R.drawable.icon_yecx, R.drawable.icon_qk,
R.drawable.icon_chaxun, R.drawable.icon_yecx, };
int surplusNum;// “最后一页多余块数”
int totalPage;// 总页数
int eachPage = 2;
/* 记录每次“跳出来的位置” */
int jumpMark = 0;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList
();
inflater = getLayoutInflater();
lins = (LinearLayout) findViewById(R.id.lins);
totalPage = (int) Math.ceil((double) text_item_list.length / 8);
if (text_item_list.length % 8 != 0) {
surplusNum = text_item_list.length
- ((int) Math.floor((double) text_item_list.length / 8))
* 8;
} else {
surplusNum = 8;
}
setBlock(lins.getChildAt(2));
pointGruop = (LinearLayout) findViewById(R.id.pointGroup);
}
private void setBlock(final View view) {
view.post(new Runnable() {
@SuppressWarnings({ "deprecation", "deprecation", "deprecation" })
@SuppressLint("InflateParams")
@Override
public void run() {
// TODO Auto-generated method stub
height = (int) ((view.getHeight()) / 3) - 100;
width = (int) ((view.getWidth()) / 3);
params = new LayoutParams((int) ((view.getWidth()) / 4),
(int) ((view.getHeight()) / 2) - 50);
// k 总页数
for (int k = 0; k < totalPage; k++) {
LinearLayout linearLayoutAll = (LinearLayout) inflater
.inflate(R.layout.linearlayout, null);
if (k == (int) Math
.ceil((double) text_item_list.length / 8) - 1) {
if (surplusNum < 5) {
eachPage = 1;
}
}
// 页卡中的"页数"
for (int i = 0; i < eachPage; i++) {
LinearLayout linearLayout = (LinearLayout) inflater
.inflate(R.layout.item_linearlayout, null);
// 每行的“块”个数
for (int j = jumpMark; j < text_item_list.length; j++) {
final int m = j;
if (linearLayout.getChildCount() == 4) {
jumpMark = j;
break;
}
LinearLayout itemLin = (LinearLayout) inflater
.inflate(R.layout.block, null);
itemText = (TextView) itemLin
.findViewById(R.id.text_title);
itemImage = (ImageView) itemLin
.findViewById(R.id.img_logo);
itemImage.setBackground(getResources().getDrawable(
img_item_list[j]));
itemText.setText(text_item_list[j]);
itemLin.setLayoutParams(params);
itemLin.getChildAt(0).setBackgroundDrawable(
getResources()
.getDrawable(backDrawables[j]));
//“块”的具体点击响应事件
itemLin.getChildAt(0).setOnClickListener(
new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (m) {
case 0:
Toast.makeText(
MainActivity.this,
getResources()
.getString(
text_item_list[0]),
Toast.LENGTH_SHORT)
.show();
break;
case 1:
Toast.makeText(
MainActivity.this,
getResources()
.getString(
text_item_list[1]),
Toast.LENGTH_SHORT)
.show();
break;
case 2:
Toast.makeText(
MainActivity.this,
getResources()
.getString(
text_item_list[2]),
Toast.LENGTH_SHORT)
.show();
break;
}
}
});
linearLayout.addView(itemLin);
}
linearLayoutAll.addView(linearLayout);
}
list.add(linearLayoutAll);
ImageView pointImage = new ImageView(MainActivity.this);
LayoutParams pointParams = new LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
pointImage.setLayoutParams(pointParams);
pointParams.rightMargin = 10;
pointImage.setBackgroundResource(R.drawable.icon_point);
pointGruop.addView(pointImage);
}
if (pointGruop.getChildCount() == 1) {
pointGruop.getChildAt(0).setVisibility(View.GONE);
} else {
((ImageView) pointGruop.getChildAt(0))
.setImageResource(R.drawable.icon_point_);
}
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new ViewPagerAdapter(list));
viewPager.addOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
for (int i = 0; i < pointGruop.getChildCount(); i++) {
((ImageView) pointGruop.getChildAt(i))
.setImageResource(R.drawable.icon_point);
}
((ImageView) pointGruop.getChildAt(arg0))
.setImageResource(R.drawable.icon_point_);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
});
}
}
此类布局应该有更简单效率更高的实现方法,请大家多多指点。