안 드 로 이 드 모방 위 챗 메 인 인터페이스 디자인
1.Action Bar 의 디자인.
먼저 main.xml 입 니 다.이 메뉴 를 먼저 정의 하고 화면 은 나중에 조정 합 니 다.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
tools:context=".MainActivity">
<item
android:id="@+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/actionbar_search_icon"
android:showAsAction="always|collapseActionView"
android:title="@string/action_search"
/>
<item
android:id="@+id/action_add"
android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"
android:icon="@drawable/actionbar_add_icon"
android:showAsAction="always"
android:title="@string/action_add"
/>
<!-- . menu -->
<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_photo"
android:icon="@drawable/ofm_photo_icon"
android:title="@string/action_photo"
android:showAsAction="never"
/>
<item
android:id="@+id/action_connection"
android:icon="@drawable/ofm_collect_icon"
android:title="@string/action_connection"
android:showAsAction="never"
/>
<item
android:id="@+id/action_card"
android:icon="@drawable/ofm_card_icon"
android:title="@string/action_card"
android:showAsAction="never"
/>
<item
android:id="@+id/action_settings"
android:icon="@drawable/ofm_setting_icon"
android:title="@string/action_settings"
android:showAsAction="never"
/>
<item
android:id="@+id/action_feed"
android:icon="@drawable/ofm_feedback_icon"
android:title="@string/action_feed"
android:showAsAction="never"
/>
</menu>
</item>
</menu>
2.android:showAsAction="always|collapse Action View"는 Action Bar 전 체 를 가득 채 울 수 있 도록 합 니 다.이렇게 하면 위 챗 의 효 과 를 모방 할 수 있 습 니 다.
3.또한 overflow 에 있 는 아이콘+title 효 과 는 하나의 item 을 사용자 정의 하여 하나의 menu 를 감 싸 야 합 니 다.그러면 코드 없 이 아이콘+title 효 과 를 실현 할 수 있 습 니 다.
4.android:actionProvider Class="develop.niuli.com.weixin.PlusAction Provider"라 는 Action Provider 는 다른 메뉴 를 사용자 정의 하여 추가 기능 을 수행 하 는 것 과 같 으 며,PlusAction 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 MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
//
subMenu.add(context.getString(R.string.plus_add_friend))
.setIcon(R.drawable.ofm_add_icon)
.setOnMenuItemClickListener(new MenuItem.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 MenuItem.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 MenuItem.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 MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
}
@Override
public boolean hasSubMenu() {
return true;
}
}
<resources>
<!-- , -->
<style name="App_Theme" parent="@android:style/Theme.Holo.Light">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">@style/wexinActionBar</item>
<item name="android:itemBackground">@drawable/actionbar_bg_selector</item>
<item name="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>
<item name="android:itemTextAppearance">@style/WeChatActionBarTitleText</item>
<item name="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item>
</style>
<style name="wexinActionBar" 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="WeChatActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_more_icon</item>
</style>
</resources>
PagerSlidingTabStrip+viewpager 를 사용 하면 둘 이 자동 으로 어 울 려 서 사용 하기에 편리 합 니 다.
mainactivity.xml 설정
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<!-- ActionBar tabs -->
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
app:pstsShouldExpand="true"
android:layout_height="40dp"/>
<android.support.v4.view.ViewPager
android:id="@+id/pagers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tabs"
/>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text=" "
android:gravity="center"
android:textSize="20sp"
/>
</FrameLayout>
public class ChatFragment extends android.support.v4.app.Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.chatfragment_layout,container,false);
return view;
}
}
/**
* tabs
*/
private PagerSlidingTabStrip tabs;
/**
*
*/
private DisplayMetrics dm;
/**
* viewpager
*/
private ViewPager pagers;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setOverflowShowingAlways();
dm = getResources().getDisplayMetrics();
pagers = (ViewPager) findViewById(R.id.pagers);
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
// FragmentActivity
pagers.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
tabs.setViewPager(pagers);
setTabValue();
}
/**
* PagerSlidingTabStrip
*/
private void setTabValue(){
// // tabs ,xml
// tabs.setShouldExpand(true);
// tabs
tabs.setDividerColor(Color.TRANSPARENT);
// tabs
//TypedValue
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 ViewPagerAdapter extends FragmentPagerAdapter {
/**
*
*/
private ChatFragment chatFragment;
/**
*
*/
private FoungFragment foundFragment;
/**
*
*/
private ContactFragment contactFragment;
private final String[] titles = { " ", " ", " " };
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@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 FoungFragment();
}
return foundFragment;
case 2:
if (contactFragment == null) {
contactFragment = new ContactFragment();
}
return contactFragment;
default:
return null;
}
}
@Override
public int getCount() {
return titles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
