Android新浪微博开发(二)界面设计之低版本实现Material Design效果

已经毕业了,发现博客好久没写了,这个Android新浪微博的开发毕设其实早就做完了,都忘了总结了(其实是太懒了= =)。

上一篇博客中已经通过了微博的sdk获取了授权完的token并且将之保存了下来。接下来就是界面的设计了,界面我决定采用Android5.0的Material Design效果,因为本人特别喜欢这种效果,平常使用的bilibili客户端和网易云音乐Android端都是5.0特性了(安利一波网易云音乐~)

                    

最终的效果就是这样的。本人的测试手机是Android5.0的但是用了v7包,是兼容低版本的Android系统的,最低是4.4。

Android5.0最明显的就是状态栏也和下面的bar一样的颜色,达到整体的效果。项目里不再使用了actionbar,而是使用toolbar来代替。

具体低版本中实现的Material Design的方法我也不具体详细说了,都是依赖v7包,使用v7和v4包里的控件实现的。之所以不使用android design support library是因为我的编译工具是eclipse,不说了一把辛酸泪,网上找的都是导入项目里都有错,各位电脑好的话还是使用Android studio吧,省心又省事。

不说废话了,直接上代码。

第一步,在style里定义主题,还有在layout中写好布局

     <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- customize the color palette -->
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/theme_color</item>
        <item name="colorPrimaryDark">@color/theme_color</item>
        <item name="colorAccent">@color/theme_accent</item>
        <item name="android:windowBackground">@android:color/white</item>
        <!-- SearchView -->
        <item name="searchViewStyle">@style/MySearchViewStyle</item>
    </style>

    <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView"></style>

    <!-- toolbar菜单样式 -->
    <style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
        <item name="actionMenuTextColor">@color/white</item>
         <item name="android:textColorPrimary">@color/white</item>
    </style>
接着在activity_main.xml中写好自己的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/theme_color"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ToolbarTheme"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <FrameLayout
            android:id="@+id/fly_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolbar" />

    </RelativeLayout>

    <ListView
        android:id="@+id/lv_left_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffffff"
        android:clipToPadding="false"
        android:divider="@null"
        android:drawSelectorOnTop="true"
        android:listSelector="?attr/selectableItemBackground"
        android:paddingTop="0dp" />

</android.support.v4.widget.DrawerLayout>
各位可以百度下navigationview,这个搭配drawerlayout可是更好的实现Material Design侧滑效果,我这边由于无法使用Design库,所以使用了ListView。

ps:使用ListView是看了hongyang大神的博客的技术参照的。

第二步,在MainActivity中初始化控件以及写逻辑

侧边栏使用了ListView代替navigationview,所以定义了适配器和设计了headerview。

public class MainActivity extends ActionBarActivity implements
		OnItemClickListener {

	private Toolbar toolbar;
	private DrawerLayout drawerLayout;
	private ListView lv_LeftMenu;
	private FrameLayout frameLayout;
	private View mHeaderView;
	private RelativeLayout rly_bg;
	// 微博头像
	private RoundImageView mRoundImageView;
	// 微博名
	private TextView tv_user;
	private LinearLayout lly_account;

	private ContentFragment mContentFragment;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		inflaterView();

		setListener();

		initView();
	}

	private void inflaterView() {

		toolbar = (Toolbar) findViewById(R.id.toolbar);
		drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
		lv_LeftMenu = (ListView) findViewById(R.id.lv_left_menu);
		frameLayout = (FrameLayout) findViewById(R.id.fly_content);
		toolbar.setTitle("主页");
		if (toolbar != null) {
			setSupportActionBar(toolbar);
		}
		toolbar.setTitleTextColor(getResources().getColor(R.color.white));
		toolbar.setNavigationIcon(R.drawable.ic_menu_white_18dp);
		setUpDrawer();

	}

	private void setUpDrawer() {
		LayoutInflater inflater = LayoutInflater.from(this);
		mHeaderView = inflater.inflate(R.layout.header_just_username,
				lv_LeftMenu, false);
		lv_LeftMenu.addHeaderView(mHeaderView);
		lv_LeftMenu.setAdapter(new MenuItemAdapter(this));
		rly_bg = (RelativeLayout) mHeaderView.findViewById(R.id.rly_bg);
		mRoundImageView = (RoundImageView) mHeaderView
				.findViewById(R.id.iv_icon);
		tv_user = (TextView) mHeaderView.findViewById(R.id.tv_name);
		lly_account = (LinearLayout) mHeaderView.findViewById(R.id.lly_account);
	}

	private void setListener() {
		lv_LeftMenu.setOnItemClickListener(this);
	}

	/**
	 * 初始化布局
	 */
	private void initView() {
		
		mContentFragment=new ContentFragment();
		getSupportFragmentManager().beginTransaction()
				.add(R.id.fly_content, mContentFragment).commit();

	}

	private static class MenuItemAdapter extends BaseAdapter {
		private final int mIconSize;
		private LayoutInflater mInflater;
		private Context mContext;

		public MenuItemAdapter(Context context) {
			mInflater = LayoutInflater.from(context);
			mContext = context;
			mIconSize = context.getResources().getDimensionPixelSize(
					R.dimen.drawer_icon_size);
		}

		private List<LvMenuItem> mItems = new ArrayList<LvMenuItem>(
				Arrays.asList(new LvMenuItem(R.drawable.ic_home_black_24dp,
						"首页"), new LvMenuItem(R.drawable.ic_drawer_at, "提及"),
						new LvMenuItem(R.drawable.ic_email_grey600_24dp, "评论"),
						new LvMenuItem(R.drawable.ic_grade_black_24dp, "收藏"),
						new LvMenuItem(), new LvMenuItem("热门微博"),
						new LvMenuItem("切换主题")));

		@Override
		public int getCount() {
			return mItems.size();
		}

		@Override
		public Object getItem(int position) {
			return mItems.get(position);
		}

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

		@Override
		public int getViewTypeCount() {
			return 3;
		}

		@Override
		public int getItemViewType(int position) {
			return mItems.get(position).type;
		}

		@Override
		public View getView(final int position, View convertView,
				ViewGroup parent) {
			LvMenuItem item = mItems.get(position);
			switch (item.type) {
			case LvMenuItem.TYPE_NORMAL:
				if (convertView == null) {
					convertView = mInflater.inflate(
							R.layout.design_drawer_item, parent, false);
				}
				TextView itemView = (TextView) convertView;
				itemView.setText(item.name);
				Drawable icon = mContext.getResources().getDrawable(item.icon);
				setIconColor(icon);
				if (icon != null) {
					icon.setBounds(0, 0, mIconSize, mIconSize);
					itemView.setCompoundDrawables(icon, null, null, null);
				}

				break;
			case LvMenuItem.TYPE_NO_ICON:
				if (convertView == null) {
					convertView = mInflater.inflate(
							R.layout.design_drawer_item_subheader, parent,
							false);
				}
				TextView subHeader = (TextView) convertView;
				subHeader.setText(item.name);
				break;
			case LvMenuItem.TYPE_SEPARATOR:
				convertView = mInflater.inflate(
						R.layout.design_drawer_item_separator, parent, false);
				break;
			}
			return convertView;
		}

		public void setIconColor(Drawable icon) {
			int textColorSecondary = android.R.attr.textColorSecondary;
			TypedValue value = new TypedValue();
			if (!mContext.getTheme().resolveAttribute(textColorSecondary,
					value, true)) {
				return;
			}
			int baseColor = mContext.getResources().getColor(value.resourceId);
			icon.setColorFilter(baseColor, PorterDuff.Mode.MULTIPLY);
		}

	}

	private static class LvMenuItem {
		public LvMenuItem(int icon, String name) {
			this.icon = icon;
			this.name = name;
			if (icon == NO_ICON && TextUtils.isEmpty(name)) {
				type = TYPE_SEPARATOR;
			} else if (icon == NO_ICON) {
				type = TYPE_NO_ICON;
			} else {
				type = TYPE_NORMAL;
			}
			if (type != TYPE_SEPARATOR && TextUtils.isEmpty(name)) {
				throw new IllegalArgumentException(
						"you need set a name for a non-SEPARATOR item");
			}
		}

		public LvMenuItem(String name) {
			this(NO_ICON, name);
		}

		public LvMenuItem() {
			this(null);
		}

		private static final int NO_ICON = 0;
		public static final int TYPE_NORMAL = 0;
		public static final int TYPE_NO_ICON = 1;
		private static final int TYPE_SEPARATOR = 3;

		int type;
		String name;
		int icon;

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.menu_main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		switch (id) {
		case android.R.id.home:
			drawerLayout.openDrawer(GravityCompat.START);
			break;
		case R.id.menu_search:

			break;
		case R.id.menu_write:

			break;
		case R.id.menu_oauth:

			break;
		case R.id.menu_about:
			drawerLayout.openDrawer(GravityCompat.START);
			break;
		default:
			break;
		}
		return true;
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		// TODO Auto-generated method stub

		Toast.makeText(MainActivity.this, "点击了第 " + position + " 条",
				Toast.LENGTH_LONG).show();

	}
}
这里还增加了点击事件,为了以后实现的逻辑。具体的逻辑都不难,看代码就能清楚。

第三步,新增Fragment,里面将是微博信息的展示,具体将在下一篇中详细说。

public class ContentFragment extends Fragment implements OnClickListener{

	private View mRootView;

	private FloatingActionButton mFloatingActionButton;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		mRootView = inflater.inflate(R.layout.fragment_content, null);

		inflaterView();
		
		setListener();

		return mRootView;
	}

	private void inflaterView() {
		mFloatingActionButton = (FloatingActionButton) mRootView
				.findViewById(R.id.fab);

	}
	private void setListener(){
		
		mFloatingActionButton.setOnClickListener(this);
		mFloatingActionButton.setBackgroundColor(getResources().getColor(R.color.theme_color));
		
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		Toast.makeText(getActivity(), "click  fab ", Toast.LENGTH_LONG).show();
	}

}
到这里,整个项目就完成了。

虽然很简单,但是学到了挺多的,尤其是控件的使用,如FloatingActionButton,Toolbar,DrawerLayout等。

源码地址:http://download.csdn.net/detail/u011388551/9565917



  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值