已经毕业了,发现博客好久没写了,这个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