android ui开发知乎,实现知乎app的主界面效果

参考文章：http://www.kwstu.com/ArticleView/kwstu_201408210609378926

一、显示效果

二、分析

很感谢轩辕的文章，学习了。实现这种效果先分析一下怎么去实现。首先最上面的是一个自定义的ActionBar样式。中间的侧滑加主页是利用DrawLayout控件来实现的。

这里使用到ActionBar，为了向下兼容，Activity类需要继承ActionBarAvtivity，还需要依赖v7包。

1.实现自定义样式

可以自定义一个Theme样式

styles.xml

@style/MyActionBar

@style/MyTitleStyle

@drawable/actionbar_background

@style/MyTitleStyle

colors.xml

其实就是一张纯色的图片

#0077d9

结果就能达到下面的显示效果：

2.侧滑

①实现侧滑

首先新建一个Fragment继承自v4.Fragment，在里面加载左侧的View布局就可以了。在MainActivity中什么都不用做。

activtiy_main.xml

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.sweetvvck.fakezhihu.MainActivity" >

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/navigation_drawer"

android:name="com.example.zhihudemo.NavigationDrawerFragment"

android:layout_width="@dimen/navigation_drawer_width"

android:layout_height="match_parent"

android:layout_gravity="start" />

NavigationDrawerFragment .java

public class NavigationDrawerFragment extends Fragment{

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View view = inflater.from(getActivity()).inflate(R.layout.fragment_navigation_drawer, null);

return view;

}

}

就上面的简单代码就已经实现了抽屉和侧滑功能。下面需要的就是对抽屉进行监听。

②对在Fragment中的选中位置反馈到Activity，需要定义回调接口，来进行数据交互。

在Fragment中定义一个接口，该Activity中实现该接口。

/**

* 宿主activity要实现的回调接口

* 用于activity与该fragment之间通讯

*/

public static interface NavigationDrawerCallbacks {

/**

* 当drawer中的某个item被选择是调用该方法

*/

void onNavigationDrawerItemSelected(String title);

}

@Override

public void onNavigationDrawerItemSelected(String title) {

//......

}

选中某一个条目的逻辑：需要更新记录的位置，ListView需要将该item设置为选中状态，需要将选中的状态通过上面定义的回调接口反馈给Activtiy。

private void selectItem(int position) {

mCurrentSelectedPosition = position;

if (mDrawerListView != null) {

mDrawerListView.setItemChecked(position, true);

}

if (mDrawerLayout != null) {

mDrawerLayout.closeDrawer(mFragmentContainerView);

}

if (mCallbacks != null) {

if(mCurrentSelectedPosition == 0) {

mCallbacks.onNavigationDrawerItemSelected(getString(R.string.app_name));

return;

}

mCallbacks.onNavigationDrawerItemSelected(mData.get(position - 1).getTitle());

}

}

demo下载地址：http://download..net/detail/z18789231876/9498721