Android 모방 왕 이 뉴스 메 인 인터페이스 디자인 실현

다음은 효과 도 한 장. 
 
그림 분석 에 따 르 면 사 이 드 바 DrawerLayout,Action Bar 의 색상 과 메뉴,Action BarDrawerToggle 의 애니메이션 효 과 를 실현 합 니 다.
그 전에 Theme 는 Action Bar 가 있 는 테마 로 바 꿔 야 합 니 다.

android:theme="@android:style/Theme.Holo.Light"

사 이 드 바-DrawerLayout
공식 문서 에 따 르 면 DrawerLayout 레이아웃 의 첫 번 째 보 기 는 activity 의 주 보기 이 고 두 번 째 는 사 이 드 바 보기 입 니 다.
따라서 메 인 레이아웃 은 다음 과 같다.
FrameLayout 를 주 보기 로 하고 include 를 왼쪽 사 이 드 바 로 불 러 오기 때문에 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>

왼쪽 사 이 드 바 의 실현 은 오픈 소스 프로젝트 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>

2.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);
    //                  ,       
    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 수정main.xml 이 파일 을 설정 하고 해석 하면 as 가 자동 으로 생 성 되 는 onCreate OptionsMenu(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>

4.Action BarDrawerToggle 의 실현
Action BarDrawerToggle 은 DrawerLayout 서랍 을 열거 나 닫 는 데 사용 되 는 스위치 입 니 다.Action BarDrawerToggle 은 DrawerLayout 와 Action Bar 에 맞 춰 추천 하 는 서랍 기능 을 제공 합 니 다.Action Bar 의 home 단 추 를 누 르 면 DrawerLayout 서랍 이 팝 업 됩 니 다.
Activity 의 두 반전 함수 에서 사용 합 니 다:

    onConfigurationChanged

    onOptionsItemSelected

Activity 의 onPostCreate()에서 Action BarDrawerToggle.syncState()를 호출 합 니 다.Action BarDrawerToggle 과 DrawerLayout 의 상 태 를 동기 화하 고 Action BarDrawerToggle 의 drawer 아이콘 을 Action Bar 의 Home-Button 아이콘 으로 설정 합 니 다.

//  DrawerLayout     
mdrawlayout.setDrawerListener(new MyAPPdrawerlistener());
 //      
mActionBarDrawerToggle = new ActionBarDrawerToggle(
        this,this.mdrawlayout,R.string.drawer_open,R.string.drawer_close);



/**
   *        actionBar  ,           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 의 클릭 이벤트 에 Action BarDrawerToggle 을 설정 하여 서랍 에 따라 변경 하면 됩 니 다.

 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:layotmarginLeft 차이:차이 점 은 android:layotmarginLeft 는 전체 레이아웃 이 왼쪽 에서 떨 어 지 는 거 리 를 설정 합 니 다.android:paddingLeft 는 레이아웃 안의 내용 거 리 를 왼쪽 에서 설정 합 니 다.
2.android:gravity:컨트롤 자체 의 위 내용 위 치 를 설정 합 니 다.android:layotgravity:부모 컨트롤 에 비해 컨트롤 자 체 를 표시 할 위 치 를 설정 합 니 다.
3.android:orderInCategory="1",actionbar 의 모든 item 우선 순위,값 이 클 수록 우선 순위 가 낮 아 지고 actionbar 가 부족 하면 overflow 에 넣 습 니 다.
4.android studio 가 github 프로젝트 를 가 져 올 때 라 이브 러 리 를 원 코드 로 복사 한 다음 grade 에 작성 자가 준 도입 문 구 를 추가 하면 됩 니 다.
이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.