Android實現(xiàn)仿網(wǎng)易新聞主界面設計
更新時間：2016年01月24日 11:44:12 作者：茶飲月
這篇文章主要為大家介紹了Android實現(xiàn)仿網(wǎng)易新聞主界面設計的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
下面先來一張效果圖
根據(jù)圖片分析,要實現(xiàn)的有側(cè)邊欄DrawerLayout,ActionBar的顏色和菜單以及ActionBarDrawerToggle的動畫效果.
在這之前,Theme要改成帶有ActionBar的主題
android:theme="@android:style/Theme.Holo.Light"
一:側(cè)邊欄-DrawerLayout
根據(jù)官方文檔,DrawerLayout布局的第一個視圖是activity的主視圖,第二個是側(cè)邊欄視圖
因此主布局可以如下這樣
FrameLayout為主視圖,include加載的則為左側(cè)邊欄,因此是start屬性
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mdrawlaout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffeeeeee">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="這是主界面"/>
</FrameLayout>
<include
android:layout_width="180dp"
android:layout_height="match_parent"
layout="@layout/drawer_layout_left"
android:layout_gravity="start"
android:clickable="true"
/>
</android.support.v4.widget.DrawerLayout>
左側(cè)邊欄的實現(xiàn),這里用到一個開源項目circleimageview,可以設置圓形頭像,很簡單的使用.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:background="#ffffff">
<!-- 圓形頭像-->
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/circleimageview"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="45dp"
android:layout_marginTop="30dp"
android:src="@drawable/circlel_header"
app:border_color="#ff0000"
app:border_width="2dp" />
<!-- 菜單列表-->
<TextView
android:id="@+id/tv_item1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:gravity="center"
android:text="夜間工具"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_item2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center"
android:text="繪畫工具"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_item3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center"
android:text="測試1"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_item4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center"
android:text="測試2"
android:textSize="16sp" />
</LinearLayout>
二:ActionBar的配置
ActionBar配置主要用代碼進行配置
//取得ActionBar
actionBar = getActionBar();
//設置不顯示標題
actionBar.setDisplayShowTitleEnabled(false);
//設置使用logo
actionBar.setDisplayUseLogoEnabled(true);
//設置logo
actionBar.setLogo(R.drawable.netease_top);
//設置ActionBar背景
Drawable background = getResources().getDrawable(R.drawable.top_bar_background);
actionBar.setBackgroundDrawable(background);
//設置是將應用程序圖標轉(zhuǎn)變成可點擊圖標,并添加返回按鈕
actionBar.setDisplayHomeAsUpEnabled(true);
其中背景色主要通過xml文件進行配置
R.drawable.top_bar_background
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="@color/top_title_bar_normal_backgrond_color"/> </shape>
top_title_bar_normal_backgrond_color
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="red">#ff0000</color> <color name="gray">#bbbbbb</color> <color name="black">#000000</color> <color name="top_title_bar_normal_backgrond_color">#EB413D</color> <color name="top_title_bar_button_press_background_color">#D83C38</color> </resources>
這樣就能顯示紅色的了
三:menu菜單的設置
這里主要是修改menu_main.xml這個文件來設置,解析的話,as自動生成的onCreateOptionsMenu(Menu menu)會自動解析
<menu xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:id="@+id/action_settings"
android:icon="@drawable/night_biz_pc_menu_icon"
android:orderInCategory="1"
android:title="@string/app_name"
android:showAsAction="always"/>
<item
android:id="@+id/action_btn01"
android:icon="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
android:orderInCategory="2"
android:title="更多"
android:showAsAction="always">
<menu>
<item
android:id="@+id/action_btn02"
android:icon="@drawable/biz_plugin_manage_weather"
android:orderInCategory="100"
android:title="11/13"
android:showAsAction="never"/>
<item
android:id="@+id/action_btn03"
android:icon="@drawable/biz_plugin_manage_offline"
android:orderInCategory="100"
android:title="離線"
android:showAsAction="never"/>
<item
android:id="@+id/action_btn04"
android:icon="@drawable/biz_plugin_manage_theme"
android:orderInCategory="100"
android:title="夜間"
android:showAsAction="never"/>
<item
android:id="@+id/action_btn05"
android:icon="@drawable/biz_plugin_manage_search"
android:orderInCategory="100"
android:title="搜索"
android:showAsAction="never"/>
<item
android:id="@+id/action_btn06"
android:icon="@drawable/biz_plugin_manage_qrcode"
android:orderInCategory="100"
android:title="掃一掃"
android:showAsAction="never"/>
<item
android:id="@+id/action_btn07"
android:icon="@drawable/biz_plugin_manage_offline"
android:orderInCategory="100"
android:title="設置"
android:showAsAction="never"/>
</menu>
</item>
</menu>
四:ActionBarDrawerToggle的實現(xiàn)
ActionBarDrawerToggle是一個開關，用于打開/關閉DrawerLayout抽屜,ActionBarDrawerToggle 提供了一個方便的方式來配合DrawerLayout和ActionBar，以實現(xiàn)推薦的抽屜功能。即點擊ActionBar的home按鈕，即可彈出DrawerLayout抽屜。
在Activity中的兩個回調(diào)函數(shù)中使用它：
- onConfigurationChanged
- onOptionsItemSelected
調(diào)用ActionBarDrawerToggle.syncState() 在Activity的onPostCreate()中；指示，ActionBarDrawerToggle與DrawerLayout的狀態(tài)同步，并將ActionBarDrawerToggle中的drawer圖標，設置為ActionBar的Home-Button的icon
//設置DrawerLayout的點擊事件
mdrawlayout.setDrawerListener(new MyAPPdrawerlistener());
//設置抽屜開關
mActionBarDrawerToggle = new ActionBarDrawerToggle(
this,this.mdrawlayout,R.string.drawer_open,R.string.drawer_close);
/**
* 該方法會自動和actionBar關聯(lián), 將開關的圖片顯示在了action上
* 如果不設置，也可以有抽屜的效果，不過是默認的圖標
* @param savedInstanceState
*/
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mActionBarDrawerToggle.syncState();
}
/**
* 當設備配置改變的時候
* @param newConfig
*/
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mActionBarDrawerToggle.onConfigurationChanged(newConfig);
}
/**
* 菜單點擊事件
* @param item
* @return
*/
@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();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
//添加mActionBarDrawerToggle點擊效果
return mActionBarDrawerToggle.onOptionsItemSelected(item)||super.onOptionsItemSelected(item);
}
最后在DrawerLayout的點擊事件中配置ActionBarDrawerToggle跟隨抽屜來改變即可
private class MyAPPdrawerlistener implements DrawerLayout.DrawerListener{
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
mActionBarDrawerToggle.onDrawerSlide(drawerView, slideOffset);
}
@Override
public void onDrawerOpened(View drawerView) {
mActionBarDrawerToggle.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
mActionBarDrawerToggle.onDrawerClosed(drawerView);
}
@Override
public void onDrawerStateChanged(int newState) {
mActionBarDrawerToggle.onDrawerStateChanged(newState);
}
}
備注一些用到的知識:
1.android:paddingLeft和android:layout_marginLeft區(qū)別：區(qū)別是android:layout_marginLef是設置整個布局離左邊的距離,android:paddingLeft是設置布局里面的內(nèi)容距離左邊
2.android:gravity：設置的是控件自身上面的內(nèi)容位置,android:layout_gravity：設置控件本身相對于父控件的顯示位置
3.android:orderInCategory="1",actionbar里每個item的優(yōu)先級，值越大優(yōu)先級越低，actionbar地方不夠就會放到overflow中
4.android studio導入github的項目的時候,直接把庫復制到原代碼下,然后在grade中添加作者給的引入語句即可.
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
您可能感興趣的文章:
- Android項目實戰(zhàn)之仿網(wǎng)易新聞的頁面（RecyclerView ）
- Android實現(xiàn)仿網(wǎng)易新聞的頂部導航指示器
- Android實現(xiàn)網(wǎng)易新聞客戶端首頁效果
- Android實現(xiàn)類似網(wǎng)易新聞選項卡動態(tài)滑動效果
- Android 仿網(wǎng)易新聞客戶端分類排序功能
- Android模擬實現(xiàn)網(wǎng)易新聞客戶端
- Android實現(xiàn)網(wǎng)易新聞客戶端側(cè)滑菜單（1）
- Android組件DrawerLayout仿網(wǎng)易新聞v4.4側(cè)滑菜單
- Android實現(xiàn)網(wǎng)易新聞客戶端側(cè)滑菜單（2）
- Android仿網(wǎng)易新聞圖片詳情下滑隱藏效果示例代碼
相關文章
這篇文章主要給大家介紹了關于Android分享微信小程序技巧之圖片優(yōu)化的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要介紹了Android開發(fā)之子線程操作UI的幾種方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
Android TextView實現(xiàn)跑馬燈效果的方法
這篇文章主要介紹了Android TextView跑馬燈效果實現(xiàn)方法,涉及Android布局文件中相關屬性的設置技巧，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
Android Thread 介紹與實例，需要的朋友可以參考一下2013-06-06
Android利用屬性動畫實現(xiàn)優(yōu)酷菜單
這篇文章主要為大家詳細介紹了Android利用屬性動畫實現(xiàn)優(yōu)酷菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Android開發(fā)OkHttp執(zhí)行流程源碼分析
這篇文章主要為大家介紹了Android開發(fā)OkHttp執(zhí)行流程源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家詳細介紹了Android實現(xiàn)添加商品到購物車的動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要給大家介紹了關于Android實踐之下拉刷新上拉加載更多的相關資料，實現(xiàn)的效果在現(xiàn)在的很多項目中都能用到，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-12-12
android提供的列表選擇框（Spinner）相當于web端用戶注冊時的選擇下拉框，比如注冊候選擇省份城市等。這篇文章主要介紹了Android組件實現(xiàn)列表選擇框功能,需要的朋友可以參考下2017-02-02
在應用登陸頁面我們需要填寫用戶名和密碼。當填寫這些信息的時候，軟鍵盤會遮擋登陸按鈕，這使得用戶體驗較差。今天小編給大家分享本教程給大家介紹解決android軟鍵盤遮擋登陸按鈕的方法，感興趣的朋友一起學習吧2016-10-10