Android 5.0 의 Toolbar 를 깊이 이해 합 니 다.

11235 단어 androidtoolbar
환경 설명:
  • Android Studio 2.0
  • V7 패키지 버 전:com.android.support:appcompat-v7:23.4.0
  • compileSdkVersion 23
  • buildToolsVersion "24.0.0"
    • 도구 모음 도입 사용
    XML 레이아웃 에 추가:
    
<android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"/>
    테마 숨 기기 Action Bar:
    
Theme.AppCompat.Light.NoActionBar
    Activity 코드 에 추가:
    
 setContentView(R.layout.activity_main);
 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);
    이 때 실행 효과:

    배경 색 추가
    
android:background="@color/colorPrimary"
    이 때 실행 효과:

    기본 속성 설정
    
<android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="@color/colorPrimary"
 app:navigationIcon="@mipmap/title_bar_back"//    
 app:subtitle="   "
 app:subtitleTextColor="#fff" //    
 app:title="  "
 app:titleTextColor="#fff"/> //
    실행 효과:

    옵션 메뉴 추가
    첫 번 째 메뉴 파일 만 들 기
    
 <menu 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"
 tools:context=".MainActivity">
 <item
 android:id="@+id/action_settings"
 android:icon="@mipmap/ic_launcher"
 android:orderInCategory="100"
 android:title="settings"
 app:showAsAction="never"/>
 <item
 android:id="@+id/action_share"
 android:icon="@mipmap/ic_action_share"
 android:orderInCategory="100"
 android:title="settings"
 app:showAsAction="ifRoom"/>
 <item
 android:id="@+id/action_search"
 android:icon="@mipmap/ic_action_search"
 android:orderInCategory="100"
 android:title="settings"
 app:showAsAction="ifRoom"/>
 </menu>
    두 번 째 부분 은 코드 에 onCreate Options Menu 방법 으로 메뉴 파일 을 불 러 옵 니 다.
    
@Override
public boolean onCreateOptionsMenu(Menu menu) {
 getMenuInflater().inflate(R.menu.menu_main, menu);
 return true;
}
    이때 효과:

    개성 설정
    왼쪽 화살표 되 돌리 기
    가 져 온 반환 화살 표를 표시 하려 면 이전에 설정 한 속성 을 제거 해 야 합 니 다:
    
app:navigationIcon="@mipmap/title_bar_back"
    그리고 코드 에 추가:
    
getSupportActionBar().setHomeButtonEnabled(true); //       
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    이때 효과:

    넘 침 아이콘 색상
    style 파일 에 추가:
    
 <!--         -->
<item name="colorControlNormal">@android:color/white</item>
    이때 효과:

    오른쪽 넘 침 아이콘 사용자 정의
    Style 파일 에 추가:
    
<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>
 <!--         -->
 <item name="colorControlNormal">@android:color/white</item>
 <!--          -->
 <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
 </style>

 <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow">
 <item name="android:src">@mipmap/ic_action_add</item>
 </style>
    이 때 실행 효과:

    팝 업 메뉴 배경 변경
    스타일 파일 에 스타일 추가:
    

    在布局文件中添加使用主题：
    

    

    
app:popupTheme="@style/ToolbarPopupTheme"
    이 때 실행 효과:
     
    팝 업 메뉴 텍스트 색상 변경
    스타일 파일 추가:
    
<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>
  <!--         -->
  <item name="colorControlNormal">@android:color/white</item>
  <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
  <!--         -->
  <item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item>
 </style>
 <!--        -->
 <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
  <item name="android:textColor">#fff</item>
 </style>
    이 때 실행 효과:
     
    제목 텍스트 크기 변경
    설정 추가:
    
 app:titleTextAppearance="@style/ToolbarTitleSize"
    스타일 추가:
    
 <!-- toolbar       -->
 <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
  <item name="android:textSize">28sp</item>
 </style>
    이 때 실행 효과:
     
    하위 제목 텍스트 크기 가 유사 합 니 다.설정 을 추가 하고 style 파일 을 정의 합 니 다.(생략)
    
app:subtitleTextAppearance="@style/ToolbarTitleSize"
    팝 업 메뉴 위치 수정
    팝 업 메뉴 를 Toolbar 아래 에 표시 하도록 설정 변경:
    우선 속성 재 설정:(인터페이스 레이아웃 파일 Toolbar 에서)
    
app:popupTheme="@style/OverflowMenuStyle"
    Style 파일 에 추가:
    
<style name="OverflowMenuStyle">
  <!--       ，   true，   Toolbar -->
  <item name="overlapAnchor">false</item>
  <item name="android:dropDownWidth">wrap_content</item>
  <item name="android:paddingRight">5dp</item>
  <!--         -->
  <item name="android:colorBackground">#FFCC99</item>
  <!--            ，         Toolbar   ，       Toolbar -->
  <item name="android:dropDownVerticalOffset">5dp</item>
  <!--            ，          ，            -->
  <item name="android:dropDownHorizontalOffset">0dp</item>
  <!--            -->
  <item name="android:textColor">#0099CC</item>
 </style>
    이 때 실행 효과:
     
    이벤트 처리
    복귀 단추 이벤트
    감청 추가
    
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    Toast.makeText(getApplicationContext(), "       ", Toast.LENGTH_LONG).show();
   }
  });
    메뉴 항목 클릭 이벤트
    재 작성 방법
    
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
   case R.id.action_settings:
    break;
   case R.id.action_search:
    break;
   case R.id.action_share:
    break;
  }
  return true;
 }
    사용자 정의 도구 모음
    Toolbar 아래 에 레이아웃 을 끼 워 넣 을 수 있 습 니 다.직접 정 의 된 레이아웃 을 Toolbar 아래 에 놓 으 면 됩 니 다.
    
<android.support.v7.widget.Toolbar
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize">

  <RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   ......
   </RelativeLayout>
 </android.support.v7.widget.Toolbar>
    Toolbar 와 DrawerLayout 왼쪽 슬라이더 메뉴
    
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v4.widget.DrawerLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/drawer_left"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <!--    -->
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="start"
  android:background="#CCCCFF"
  android:orientation="vertical">

  <TextView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="10dp"
   android:text="   "
   android:textSize="18sp"/>

  <TextView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="10dp"
   android:text="   "
   android:textSize="18sp"/>
 </LinearLayout>
</android.support.v4.widget.DrawerLayout>
    왼쪽 슬라이더 레이아웃 파일 추가:
    홈 레이아웃 파일 에 가 져 오기:(Toolbar 아래)
    
<!--DrawerLayout-->
<include layout="@layout/custom_drawerlayout"/>
    코드 에 연결 추가:
    
DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left);
 ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close);
 mDrawerToggle.syncState();
 mDrawerLayout.setDrawerListener(mDrawerToggle);
    이 때 실행 효과:
     
    새 버 전 studio 는 Activity 를 새로 만 들 때 해당 하 는 템 플 릿 을 선택 할 수 있 습 니 다.DrawerLayout 를 자동 으로 만 들 고 Toolbar 와 연 결 됩 니 다.
    총결산
    이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 댓 글 을 남 겨 주 십시오.
    

    





    

    

    


    

    

    

    

    





Android 애플 릿 구현 옵션 메뉴

    

    
Android 애플 릿 이 간단 한 QQ 인터페이스 구현






    

    

    

    

    좋은 웹페이지 즐겨찾기
    


    


    

    

    개발자 우수 사이트 수집
    





개발자가 알아야 할 필수 사이트 100선 추천
우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

    
best100-homepage