类似列表滑动块的实现

题外话了:学习写一写博客,一方面是在工作一天后记录分享一下当天比较重要的事情,另一方面是不断的学习,回顾。

今天打算写的是一个简单的界面布局,这种布局在手机中可能是很少见,有些俗套和老土,表达不能很清楚,还是看一下图吧,红色虚线框中为主要功能布局,实现这种布局。

简单说明一下,每一页最多显示八个功能块(可以自定义),一行四个,超过四个自然就换“另一行”了,多于八个的自动分页,可以通过滑动显示,最下面是导航,定位在哪一个页面。主要实现是通过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

					}
				});

			}
		});

	}
}

    
    
   
   

此类布局应该有更简单效率更高的实现方法,请大家多多指点。








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值