Android 모방 위 챗 5.2.1 메 인 인터페이스 및 메시지 알림
15105 단어 Android위 챗 메 인 인터페이스메시지 알림
이것 은 5.2.1 버 전 을 모방 한 디 스 플레이 인터페이스 입 니 다.다음 그림 과 같 습 니 다.
기능 및 실현 사고 안내
주요 기능 은 매우 간단 하 다.
1.위 에 사용자 정의 제목 표시 줄 이 있 습 니 다.
2.아래 는 채 팅,발견,주소록 옵션 입 니 다.
3.손가락 이 미 끄 러 질 때 텍스트 아래 파란색 indicator 는 미 끄 러 질 수 있 습 니 다.
4.채 팅 의 오른쪽 에 읽 지 않 은 메시지 의 빨간색 알림 원점 이 있 습 니 다.
사용자 정의 제목 표시 줄 은 LinearLayout 이 며 시스템 이 자체 적 으로 가지 고 있 는 TitleBar(또는 Action Bar)를 숨 깁 니 다.
옵션 이기 때문에 자 연 스 럽 게 Fragment 가 생각 났 습 니 다.
손가락 이 미 끄 러 질 수 있 습 니 다.검은색 구역 은 ViewPager 입 니 다.데이터 원본 은 Fragment 로 구 성 된 집합 이 고 Fragment Pager Adapter 를 통 해 관리 합 니 다.
파란색 인디케이터 가 옵션 카드 의 미끄럼 에 따라 미 끄 러 지 려 면 ViewPager 에 감청 을 설정 하고 리 셋 방법의 리 셋 값 에 따라 이 인디케이터 의 margin Left 속성 값 을 제어 하면 이 효 과 를 실현 할 수 있 습 니 다.
마지막 메시지 알림 의 작은 원점 은 BadgeView 입 니 다.제3자 오픈 소스 컨트롤 입 니 다.
주 레이아웃
MainActivity 레이아웃 은 다음 과 같 습 니 다.먼저 사용자 정의 TitleBar 입 니 다.
<!-- top1.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/topone_bg"
android:paddingLeft="12dp"
android:paddingRight="12dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/actionbar_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text=" "
android:textColor="#D3D3D3"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/actionbar_search_icon" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/actionbar_add_icon" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/actionbar_more_icon" />
</LinearLayout>
</RelativeLayout>
다음은 세 개의 옵션 카드 의 레이아웃 입 니 다.
<!-- top2.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#EEEEEE"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="37dp"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/ll_chat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_tab_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=" "
android:textColor="#008000"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/tv_tab_discover"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textColor="@android:color/black"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="@+id/tv_tab_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textColor="@android:color/black"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="@+id/iv_tab_line"
android:layout_width="100dp"
android:layout_height="3dp"
android:background="@drawable/tabline" />
</LinearLayout>
Indicator 는 코드 에 길 이 를 동적 으로 설정 해 야 하기 때문에 xml 에 임의의 값 을 추가 할 수 있 습 니 다.
마지막 으로 top 1.xml,top 2.xml 을 주 레이아웃 에 추가 하고 주 레이아웃 에 ViewPager 를 도입 합 니 다.
<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.demo.lenovo.myapplication.MainActivity">
<include layout="@layout/top1" />
<include layout="@layout/top2" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
주:Activity 가 Action BarActivity 에 계승 되면 setContentView()방법 전에
requestWindowFeature(Window.FEATURE_NO_TITLE);제목 표시 줄 을 숨 길 수 있 습 니 다.AppCompact Activity 에 계승 하면 AndroidMainfest 에서응용 프로그램 탭 에 테 마 를 설정 하면
android:theme="@style/Theme.AppCompat.NoActionBar"제목 표시 줄 을 숨 기 는 목적 도 실현 할 수 있 습 니 다.Fragment Pager Adapter 를 사용 하여 ViewPager 에 적합 한 데 이 터 를 만 듭 니 다.
MainActivity.java 에 Fragment PagerAdapter 논 리 를 추가 합 니 다.(여기 서 세 개의 Fragment 레이아웃 과 코드 를 생략 합 니 다)
private FragmentPagerAdapter adapter;
private List<Fragment> mData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
mData = new ArrayList<>();
mData.add(new ChatFragment());
mData.add(new DiscoverFragment());
mData.add(new ContactsFragment());
adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mData.get(position);
}
@Override
public int getCount() {
return mData.size();
}
};
vp_content.setAdapter(adapter);
이 기능 을 구현 하기 위해 서 는 ViewPager 에 setOnPageChangeListener 감청 을 설정 하고 OnPageChangeListener 인터페이스의 리 셋 방법 인 onPagerSelected(int position)를 통 해 현재 몇 페이지 로 미 끄 러 졌 는 지 감청 해 야 합 니 다.
@Override
public void onPageSelected(int position) {
Log.e(TAG, "onPageSelected: " + position);
resetTextViewColor();
switch (position) {
case 0:
addBadgeView(); tv_tab_chat.setTextColor(Color.parseColor("#008000"));
break;
case 1:
tv_tab_discover.setTextColor(Color.parseColor("#008000"));
break;
case 2:
tv_tab_contacts.setTextColor(Color.parseColor("#008000"));
break;
}
}
//
private void resetTextViewColor() {
tv_tab_contacts.setTextColor(Color.BLACK);
tv_tab_chat.setTextColor(Color.BLACK);
tv_tab_discover.setTextColor(Color.BLACK);
addBadgeView()에서;방법 에서 먼저 BadgeView 가 비어 있 는 지 여 부 를 판단 하고 비어 있 지 않 으 면 먼저 제거 한 다음 에 새로운 BadgeView 를 추가 합 니 다.코드 는 다음 과 같 습 니 다.
private void addBadgeView()
{
if (mBadgeView != null) {
ll_chat.removeView(mBadgeView);
}
mBadgeView = new BadgeView(MainActivity.this);
ll_chat.addView(mBadgeView);
mBadgeView.setBadgeCount(9);
}
이 기능 을 구현 하기 위해 서 는 ViewPager 에 setOnPageChangeListener 감청 을 설정 하고 OnPageChangeListener 인터페이스의 리 셋 방법 인 onPagerSelected(int position)를 통 해 현재 몇 페이지 로 미 끄 러 졌 는 지 감청 해 야 합 니 다.
@Override
public void onPageSelected(int position) {
Log.e(TAG, "onPageSelected: " + position);
resetTextViewColor();
switch (position) {
case 0:
addBadgeView(); tv_tab_chat.setTextColor(Color.parseColor("#008000"));
break;
case 1:
tv_tab_discover.setTextColor(Color.parseColor("#008000"));
break;
case 2:
tv_tab_contacts.setTextColor(Color.parseColor("#008000"));
break;
}
}
//
private void resetTextViewColor() {
tv_tab_contacts.setTextColor(Color.BLACK);
tv_tab_chat.setTextColor(Color.BLACK);
tv_tab_discover.setTextColor(Color.BLACK);
addBadgeView()에서;방법 에서 먼저 BadgeView 가 비어 있 는 지 여 부 를 판단 하고 비어 있 지 않 으 면 먼저 제거 한 다음 에 새로운 BadgeView 를 추가 합 니 다.코드 는 다음 과 같 습 니 다.
private void addBadgeView()
{
if (mBadgeView != null) {
ll_chat.removeView(mBadgeView);
}
mBadgeView = new BadgeView(MainActivity.this);
ll_chat.addView(mBadgeView);
mBadgeView.setBadgeCount(9);
}
이 Indicator 가 손가락 이 미 끄 러 지 는 데 따 른 효 과 를 실현 하기 위해 서 는 OnPageChangeListener 인터페이스 에 있 는 onPageScrolled()방법 에서 논 리 를 작성 해 야 합 니 다.이 방법의 문 서 는 다음 과 같 습 니 다.
，그 중에서 첫 번 째 매개 변수 position 은 몇 페이지 까지 미 끄 러 졌 다 는 것 을 나타 낸다.예 를 들 어 0 페이지 에서 첫 페이지 로 미 끄 러 지면 position 은 0 이 되 고 손 을 놓 은 후에 첫 페이지 로 미 끄 러 지면 position 은 1 이 되 며 두 번 째 매개 변수 position Offset 은 미 끄 러 지 는 백분율 을 나타 내 고 수치 범 위 는 0-1 이 며 마지막 매개 변수 position Offset Pixels 는 미 끄 러 지 는 픽 셀 수 를 나타 낸다.
다음은 0->1 페이지 에서 인쇄 한 log 입 니 다.다음 과 같 습 니 다.
1->2 페이지 에서 인쇄 한 log:
2->1 페이지 에서 인쇄 한 log:
마지막 으로(position+position Offset)*1/3 에 따라 이 Indicator 의 margin Left 를 설정 할 수 있 습 니 다.
우선,Indicator 에 폭 을 설정 해 야 합 니 다.그 폭 은 화면 너비 의 1/3 입 니 다.
WindowManager manager = getWindow().getWindowManager();
Display display = manager.getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
mScreenOneThird = outMetrics.widthPixels / 3;
Indicator 에 설정:
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) iv_tab_line.getLayoutParams();
lp.width = mScreenOneThird;
iv_tab_line.setLayoutParams(lp);
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) iv_tab_line.getLayoutParams();
lp.leftMargin = (int) ((positionOffset * mScreenOneThird) + (mScreenOneThird * position));
iv_tab_line.setLayoutParams(lp);
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
