Android 는 Action Bar 로 위 챗 메 인 인터페이스의 인 스 턴 스 코드 를 모방 합 니 다.
20470 단어 android작은 편지인터페이스위 챗 메 인 인터페이스
만약 당신 이 아직 나의 앞의 두 편의 문장 을 보지 못 했다 면,먼저 가서 읽 어 보 는 것 을 건의 합 니 다.
위 챗 이 휴대 전화 에서 가장 핫 한 애플 리 케 이 션 이 라 고 인정 할 것 이 라 고 믿 습 니 다.거의 모든 사람의 휴대 전화 에 설치 되 어 있 습 니 다.위 챗 은 기능 이 매우 강 한 것 을 제외 하고 인터페이스 도 상당히 아름 답 게 만 들 었 다.그의 Action Bar 는 사람들 로 하여 금 눈 과 마음 을 즐겁게 하 는 느낌 을 가지 게 한다.다음 그림 과 같다.
모 바 일 애플 리 케 이 션 의 기술 기준 으로서 우 리 는 당연히 위 챗 에 많이 배 워 야 한다.그러면 오늘 실전 의 주 제 는 바로 위 챗 메 인 인터페이스의 실현 을 모방 하 는 것 이다.
우선 WeChatSample 이라는 안 드 로 이 드 항목 을 새로 만 듭 니 다.Action Bar 를 실현 하려 면 첫 번 째 단 계 는 당연히 menu 디 렉 터 리 에 있 는 main.xml 파일 을 편집 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.wechatsample.MainActivity" >
<item
android:id="@+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/actionbar_search_icon"
android:showAsAction="ifRoom|collapseActionView"
android:title="@string/action_search"/>
<item
android:id="@+id/action_plus"
android:actionProviderClass="com.example.wechatsample.PlusActionProvider"
android:icon="@drawable/actionbar_add_icon"
android:showAsAction="ifRoom"
android:title="@string/action_plus"/>
<item
android:id="@+id/action_album"
android:icon="@drawable/ofm_photo_icon"
android:title="@string/action_album"/>
<item
android:id="@+id/action_collection"
android:icon="@drawable/ofm_collect_icon"
android:title="@string/action_collection"/>
<item
android:id="@+id/action_card"
android:icon="@drawable/ofm_card_icon"
android:title="@string/action_card"/>
<item
android:id="@+id/action_settings"
android:icon="@drawable/ofm_setting_icon"
android:title="@string/action_settings"/>
<item
android:id="@+id/action_feed"
android:icon="@drawable/ofm_feedback_icon"
android:title="@string/action_feed"/>
</menu>
이 파일 의 모든 속성의 의 미 를 나 는 앞의 두 문장 에서 모두 설명 한 적 이 있 는데,여 기 는 더 이상 중복 설명 하지 않 겠 다.주의해 야 할 것 은위의 main.xml 을 살 펴 보면 PlusAction Provider 라 는 사용자 정의 Action Provider 가 있 습 니 다.이것 은 주로 위 챗 에 있 는 추가 번호 의 하위 메뉴 를 모 의 하 는 데 사 용 됩 니 다.다음은 이 종 류 를 실현 하 겠 습 니 다.
public class PlusActionProvider extends ActionProvider {
private Context context;
public PlusActionProvider(Context context) {
super(context);
this.context = context;
}
@Override
public View onCreateActionView() {
return null;
}
@Override
public void onPrepareSubMenu(SubMenu subMenu) {
subMenu.clear();
subMenu.add(context.getString(R.string.plus_group_chat))
.setIcon(R.drawable.ofm_group_chat_icon)
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return true;
}
});
subMenu.add(context.getString(R.string.plus_add_friend))
.setIcon(R.drawable.ofm_add_icon)
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
subMenu.add(context.getString(R.string.plus_video_chat))
.setIcon(R.drawable.ofm_video_icon)
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
subMenu.add(context.getString(R.string.plus_scan))
.setIcon(R.drawable.ofm_qrcode_icon)
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
subMenu.add(context.getString(R.string.plus_take_photo))
.setIcon(R.drawable.ofm_camera_icon)
.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
}
@Override
public boolean hasSubMenu() {
return true;
}
}
Action Provider 를 사용자 정의 하 는 방법 은 저도 지난 글 에서 소 개 했 습 니 다.이런 종 류 를 볼 때 매우 간단 하고 이해 하기 쉬 울 것 이 라 고 믿 습 니 다.여기 서 우 리 는 PlusAction Provider 에서 다섯 개의 하위 메뉴 를 정 의 했 습 니 다.모든 하위 메뉴 에 하나의 제목 과 아이콘 을 지정 하여 각각 위 챗 의 다섯 개의 하위 메뉴 에 대응 합 니 다.또한,여기 서 모든 하위 메뉴 에 클릭 이 벤트 를 정 의 했 지만 클릭 한 항목 의 실현 은 모두 비어 있 습 니 다.왜냐하면 우리 의 이 글 은 위 챗 의 인터페이스 실현 을 모방 한 것 일 뿐 기능 은 말 하지 않 습 니 다.이어서 MainActivity 의 코드 를 수정 합 니 다.다음 과 같 습 니 다.
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setOverflowShowingAlways();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
try {
Method m = menu.getClass().getDeclaredMethod(
"setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
}
}
}
return super.onMenuOpened(featureId, menu);
}
private void setOverflowShowingAlways() {
try {
ViewConfiguration config = ViewConfiguration.get(this);
Field menuKeyField = ViewConfiguration.class
.getDeclaredField("sHasPermanentMenuKey");
menuKeyField.setAccessible(true);
menuKeyField.setBoolean(config, false);
} catch (Exception e) {
e.printStackTrace();
}
}
}
코드 가 길지 않 고 모두 익숙 합 니 다.onCreate Options Menu()방법 에 main.xml 파일 을 불 러 옵 니 다.onMenu Opened()방법 은 overflow 에 숨겨 진 Action 단추 의 아이콘 을 표시 하 는 데 사 용 됩 니 다.setOverflow ShowingAlways()방법 은 물리 Menu 키 를 차단 하 는 것 입 니 다.그렇지 않 으 면 물리 Menu 키 가 있 는 휴대 전화 에 overflow 버튼 이 표시 되 지 않 습 니 다.현재 우 리 는 Action Bar 의 화면 을 모두 실현 하 였 습 니 다.그러나 지금 실행 하면 효과 와 위 챗 이 아직 멀 었 다 는 것 을 알 수 있 습 니 다.글꼴 의 색상 과 크기 등에 있어 서 우 리 는 아직 미조정 을 하지 않 았 기 때문에 다음 에 우 리 는 Action Bar 의 모습 을 사용자 정의 해 야 합 니 다.styles.xml 파일 을 수정 합 니 다.코드 는 다음 과 같 습 니 다.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/WeChatActionBar</item>
<item name="android:itemBackground">@drawable/actionbar_bg_selector</item>
<item name="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>
<item name="android:itemTextAppearance">@style/WeChatActionBarOverflow</item>
<item name="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item>
</style>
<style name="WeChatActionBar" parent="@android:style/Widget.Holo.ActionBar">
<item name="android:background">#303537</item>
<item name="android:titleTextStyle">@style/WeChatActionBarTitleText</item>
</style>
<style name="WeChatActionBarTitleText" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#cfcfcf</item>
<item name="android:textSize">17sp</item>
</style>
<style name="WeChatActionBarOverflow" parent="@android:style/Widget.ActionButton.Overflow">
<item name="android:textSize">16sp</item>
</style>
<style name="WeChatActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_more_icon</item>
</style>
</resources>
여기 서 저 는 Action Bar 의 배경 색,제목 텍스트 색상 과 크기,하위 메뉴 배경 색 등 을 편리 하 게 조정 하여 위 챗 의 전체적인 스타일 과 일치 하 게 만 들 었 습 니 다.그 중에서 사용 하 는 여러 가지 그림 도 제 가 drawable 폴 더 에 미리 넣 었 습 니 다.Action Bar 스타일 을 사용자 정의 하 는 방법 은 제 가 지난 글 에서 소개 한 적 이 있 습 니 다.익숙 하지 않 은 친 구 는 다시 참고 하 셔 도 됩 니 다.마지막 으로 AndroidManifest.xml 에 약간의 수정 이 필요 합 니 다.다음 과 같 습 니 다.
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:logo="@drawable/logo"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.wechatsample.MainActivity"
android:icon="@drawable/logo"
android:label="@string/app_name" >
......
</activity>
</application>
보 실 수 있 습 니 다.우리 의 화면 은 이미 위 챗 과 매우 비슷 합 니 다.거의 가짜 로 진실 을 어 지 럽 힐 수 있 습 니 다!하하,조금 만 만족해 라.하지만 Action Bar 가 이렇게 쓸 수 있다 면 당신 의 이 방면 의 기술 도 기본적으로 통과 라 고 할 수 있 습 니 다.
하지만 아직 끝나 지 않 았 습 니 다.맨 위 에 있 는 액 션 바 는 성공 적 으로 이 루어 졌 지만 아래 의 채 팅,발견,주소록 등 세 개의 Tab 는 아직 하지 않 았 습 니 다.이렇게 고 급 스 러 운 대기 등급 의 기능 을 이대로 놓 칠 수 는 없 기 때문에 위 챗 과 같은 Tab 효 과 를 어떻게 실현 할 수 있 는 지 살 펴 보 자.
지난 글 에서 Action Bar 에서 Tab 를 만 드 는 방법 에 대해 설 명 했 지만 여 기 는 사용 할 준비 가 되 어 있 지 않 습 니 다.유연성 이 부족 해서 위 챗 과 똑 같은 Tab 효 과 를 내기 어렵 습 니 다.그리고 Action Bar Tab 의 대체 품 도 많 습 니 다.우 리 는 스스로 쓸 수 있 고 인터넷 에 있 는 오픈 소스 프레임 워 크 도 사용 할 수 있 습 니 다.Pager Sliding TabStrip 이라는 프레임 워 크 는 아주 좋 습 니 다.여기 서 간단 하고 안정 적 으로 볼 때 우 리 는 직접 사용 할 수 있 습 니 다.
PagerSlidingTabStrip 은 GitHub 의 오픈 소스 프레임 워 크 입 니 다.Andreas Stuetz 가 작 성 했 습 니 다.Action Bar Tab 와 기본적으로 유사 한 기능 을 완성 할 수 있 지만 완전히 오픈 소스 이기 때문에 코드 를 마음대로 수정 할 수 있 기 때문에 확장 성 이 매우 좋 습 니 다.
그럼 시작 하 겠 습 니 다.우선 PagerSlidingTabStrip 의 소스 코드 를 다운로드 하고 우리 프로젝트 에 통합 해 야 합 니 다.PagerSlidingTabStrip 의Android Action Bar 는 공식 적 으로 추천 하 는 최고의 내 비게 이 션 표시 줄 을 완전히 해석 합 니 다(위).
구체 적 으로 통합 하 는 방법 은 모두 가(Sliding Menu,Universal-Image-Loader 등 과 똑 같 을 것 이 라 고 믿 습 니 다)여기 서 나 는 더 이상 군말 하지 않 겠 습 니 다.주의해 야 할 것 은 PagerSlidingTabStrip 의 네 이 티 브 코드 도 위 챗 과 똑 같은 효 과 를 실현 하지 못 하기 때문에 우 리 는 그 소스 코드 를 바탕 으로 수정 해 야 합 니 다.그러나 PagerSlidingTabStrip 의 소스 코드 가 비교적 길 기 때문에 수정 한 코드 를 붙 이지 않 겠 습 니 다.여러분 은 나중에 WeChatSample 의 소스 코드 를 다운로드 할 수 있 습 니 다.수 정 된 PagerSlidingTabStrip 코드 를 찾 을 수 있 습 니 다.
그러면 통합 이 끝 난 후에 기능 을 작성 해 야 합 니 다.activity 를 수정 해 야 합 니 다.main.xml.xml(즉,MainActivity 에 대응 하 는 레이아웃 파일)의 코드 는 다음 과 같 습 니 다.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="40dp" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tabs" />
</RelativeLayout>
비교적 간단 합 니 다.그 중에서 두 개의 컨트롤 을 설 치 했 습 니 다.PagerSlidingTabStrip 은 맨 위 에 있 고 ViewPager 는 PagerSlidingTabStrip 아래 에 있 습 니 다.그 다음 에 ChatFragment,FoundFragment 와 ContactsFragment 를 만 들 고 각각 채 팅,발견,주소록 등 세 개의 인터페이스 에 대응 합 니 다.Fragment 에 하나의 TextView 를 설치 하여 이 인 터 페 이 스 를 표시 하면 됩 니 다.ChatFragment 는 다음 과 같 습 니 다.
public class ChatFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
FrameLayout fl = new FrameLayout(getActivity());
fl.setLayoutParams(params);
DisplayMetrics dm = getResources().getDisplayMetrics();
final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);
TextView v = new TextView(getActivity());
params.setMargins(margin, margin, margin, margin);
v.setLayoutParams(params);
v.setLayoutParams(params);
v.setGravity(Gravity.CENTER);
v.setText(" ");
v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));
fl.addView(v);
return fl;
}
}
FoundFragment 는 다음 과 같다.
public class FoundFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
FrameLayout fl = new FrameLayout(getActivity());
fl.setLayoutParams(params);
DisplayMetrics dm = getResources().getDisplayMetrics();
final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);
TextView v = new TextView(getActivity());
params.setMargins(margin, margin, margin, margin);
v.setLayoutParams(params);
v.setLayoutParams(params);
v.setGravity(Gravity.CENTER);
v.setText(" ");
v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));
fl.addView(v);
return fl;
}
}
ContactsFragment 는 다음 과 같 습 니 다.
public class ContactsFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
FrameLayout fl = new FrameLayout(getActivity());
fl.setLayoutParams(params);
DisplayMetrics dm = getResources().getDisplayMetrics();
final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);
TextView v = new TextView(getActivity());
params.setMargins(margin, margin, margin, margin);
v.setLayoutParams(params);
v.setLayoutParams(params);
v.setGravity(Gravity.CENTER);
v.setText(" ");
v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));
fl.addView(v);
return fl;
}
}
마지막 으로 MainActivity 의 코드 를 수정 하고 PagerSlidingTabStrip 설정 을 추가 합 니 다.다음 과 같 습 니 다.
public class MainActivity extends FragmentActivity {
/**
* Fragment
*/
private ChatFragment chatFragment;
/**
* Fragment
*/
private FoundFragment foundFragment;
/**
* Fragment
*/
private ContactsFragment contactsFragment;
/**
* PagerSlidingTabStrip
*/
private PagerSlidingTabStrip tabs;
/**
*
*/
private DisplayMetrics dm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setOverflowShowingAlways();
dm = getResources().getDisplayMetrics();
ViewPager pager = (ViewPager) findViewById(R.id.pager);
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
tabs.setViewPager(pager);
setTabsValue();
}
/**
* PagerSlidingTabStrip 。
*/
private void setTabsValue() {
// Tab
tabs.setShouldExpand(true);
// Tab
tabs.setDividerColor(Color.TRANSPARENT);
// Tab
tabs.setUnderlineHeight((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 1, dm));
// Tab Indicator
tabs.setIndicatorHeight((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 4, dm));
// Tab
tabs.setTextSize((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, dm));
// Tab Indicator
tabs.setIndicatorColor(Color.parseColor("#45c01a"));
// Tab ( )
tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
// Tab
tabs.setTabBackground(0);
}
public class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
private final String[] titles = { " ", " ", " " };
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
@Override
public int getCount() {
return titles.length;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
if (chatFragment == null) {
chatFragment = new ChatFragment();
}
return chatFragment;
case 1:
if (foundFragment == null) {
foundFragment = new FoundFragment();
}
return foundFragment;
case 2:
if (contactsFragment == null) {
contactsFragment = new ContactsFragment();
}
return contactsFragment;
default:
return null;
}
}
}
......
}
설정 도 간단 합 니 다.먼저,onCreate()방법 에서 Pager Sliding TabStrip 과 ViewPager 의 인 스 턴 스 를 얻 은 다음 에 ViewPager 에 Adapter 를 설 치 했 습 니 다.Adapter 에 ChatFragment,FoundFragment 와 ContactsFragment 라 는 세 개의 Fragment 를 저장 하면 채 팅,발견,발견 을 실현 할 수 있 습 니 다.통신 록 이 세 인터페이스 사이 의 미끄럼 효과 가 나 타 났 다.이 어 ViewPager 의 인 스 턴 스 를 PagerSlidingTabStrip 에 설정 한 다음 setTabsValue()방법 으로 PagerSlidingTabStrip 의 디 테 일 을 설정 하여 위 챗 Tab 과 똑 같은 효 과 를 실현 합 니 다.모든 속성의 역할 은 코드 에 주석 설명 이 있 으 니 더 이상 설명 하지 않 겠 습 니 다.그 중 하 나 는 setSelected TextColor()라 는 방법 은 제 가 사용자 정의 한 것 입 니 다.PagerSlidingTabStrip 은 선택 한 Tab 의 제목 을 하 이 라이트 로 표시 하 는 것 을 지원 하지 않 기 때문에 위 챗 은 이 효과 가 있 습 니 다.그래서 저 는 여기 서 PagerSlidingTabStrip 의 소스 코드 를 수 정 했 습 니 다.만약 에 원생 의 PagerSlidingTabStrip 코드 를 보 았 다 면 이 방법 을 찾 을 수 없 었 을 것 입 니 다.
자,여기까지 코드 를 다 썼 습 니 다.다음 그림 과 같이 효 과 를 실행 해 봅 시다.
네,효과 가 상당히 좋 습 니 다.제목 은 고 모방 위 챗 메 인 화면 이 라 고 하 는데 너무 한 것 은 아 닙 니까?앞 뒤 세 편의 글 을 공부 한 후에 저 는 여러분 들 이 Action Bar 의 기술 에 대해 잘 알 고 있다 고 믿 습 니 다.그러면 저희 Action Bar 시리즈 의 글 도 여기 서 끝 납 니 다.
자,오늘 설명 은 여기까지 입 니 다.궁금 한 분 은 아래 에 메 시 지 를 남 겨 주세요.
Android Action Bar 는 공식 적 으로 추천 하 는 가장 좋 은 네 비게 이 션 표시 줄(아래)을 완전히 해석 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.