简单新闻客户端(1)---主界面设计
来源:互联网 发布:字体软件下载 编辑:程序博客网 时间:2024/05/02 13:58
模仿实例地址:SimpleNews
前言这是github开源项目,原项目有四个模块。我这里之模仿其中
一个(新闻)。学会MD开发和MVP架构。
主页布局:
这里主要使用了toolbar和DrawerLayout实现导航条以及侧滑的效果。
当然为了填充侧滑栏,又使用了NavigationView这个控件。
toolbar和DrawerLayout
我已经在前面的博客文章介绍过了:
android–UI—侧滑drawerLayout
android–UI–导航条toolbar
NavigationView实践
使用ToolBar代替ActionBar的时候,首先去掉Actionbar
修该主题:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
为了使用NavigationView,添加依赖:
compile 'com.android.support:design:24.2.0'
新人要知道如何搜索依赖添加:File–>ProjectStructure–>app–>Dependencies–>绿色加号–>Library Dependencies–>搜索–>双击
布局文件: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:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".Activity.MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/appbar" layout="@layout/toolbar" /> <!-- Content --> <FrameLayout android:id="@+id/content_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/appbar" /> </RelativeLayout> <!-- Drawer --> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_head" app:menu="@menu/drawer" /></android.support.v4.widget.DrawerLayout>
toolbar.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="5dp" /></LinearLayout>
menu文件,给侧边栏添加选项。以及顶部layout
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_original" android:checked="true" android:icon="@mipmap/ic_launcher" android:title="菜单1"/> <item android:id="@+id/navigation_library" android:icon="@mipmap/ic_launcher" android:title="菜单2"/> </group></menu>
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="192dp" android:background="?attr/colorPrimaryDark" android:gravity="center" android:orientation="vertical" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:src="@mipmap/ic_launcher" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_marginTop="10dp" android:textSize="18sp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="lw_zhaoritian" android:gravity="center" /></LinearLayout>
效果测试:
toolbar还是空的,需要在代码里设置。
MainActivity:
public class MainActivity extends AppCompatActivity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; private Toolbar mToolbar; private NavigationView mNavigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close); mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle); mNavigationView = (NavigationView) findViewById(R.id.navigation); setupDrawerContent(mNavigationView); } @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) { int id = item.getItemId(); if (id == R.id.action_settings) { Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_LONG).show(); return true; } return super.onOptionsItemSelected(item); } private void setupDrawerContent(NavigationView navigationView) { navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { Toast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_LONG).show(); menuItem.setChecked(true); mDrawerLayout.closeDrawers(); return true; } }); }}
测试:
讲解:
首先:获取当前的toolbar取代之前的actionbar
mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar);
第一步:给toolbar添加menu并且添加事件—-详见 android–UI–导航条toolbar
第二步:
使用ActionBarDrawerToggle
类,使我们的toolbar和drawer更好的显示。
参考文章:ActionBarDrawerToggle和ToolBar结合使用
ActionBarDrawerToggle就是DrawerLayout事件的监听器。
能
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolBar, R.string.drawer_open, R.string.drawer_close){ @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); if (!mUserLearnedDrawer && !mFromSavedInstanceState) { mUserLearnedDrawer = true; saveToPreferences(getActivity(), KEY_USER_LEARNED_DWARER, mUserLearnedDrawer + ""); } getActivity().invalidateOptionsMenu(); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); getActivity().invalidateOptionsMenu(); } @Override public void onDrawerSlide(View drawerView, float slideOffset) { if (slideOffset < 0.6) { toolBar.setAlpha(1 - slideOffset); } } };
实例化ActionBarDrawerToggle时候三个参数:
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close); mDrawerToggle.syncState();
设置DrawerLayout监听:
mDrawerLayout.setDrawerListener(mDrawerToggle);
设置侧滑菜单的点击事件:
private void setupDrawerContent(NavigationView navigationView) { navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { Toast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_LONG).show(); menuItem.setChecked(true); mDrawerLayout.closeDrawers(); return true; } }); }
- 简单新闻客户端(1)---主界面设计
- 简单新闻客户端(2)---新闻分页界面设计
- 简单新闻客户端
- 简单新闻客户端案例
- 简单新闻客户端实现
- 《『若水新闻』客户端开发教程》——02.主界面设计
- 制作简单的新闻客户端
- 制作一个简单的新闻客户端
- 安卓新闻客户端的简单实现
- 分享一个简单新闻客户端源码
- Android新闻客户端开发1--UI设计(主界面)
- 新闻客户端
- 新闻客户端
- 新闻客户端
- 新闻客户端
- 新闻客户端
- 新闻客户端
- 新闻客户端
- ListView的优化、两种复用View的方式
- 找出字符串中第一个只出现一次的字符
- do..while..一些注意
- 【屌丝程序员的逆袭之路】
- 欢迎使用CSDN-markdown编辑器
- 简单新闻客户端(1)---主界面设计
- spring mvc 返回字符串带双引号
- java加载并遍历properties文件
- 坐标系统哪些事
- QSS总结
- Vert.x Web模块(六)
- 数据定义和查询
- 从零开始学_JavaScript_系列(28)——dojo的aspect.around方法
- 2016-9-27