@ [TOC] AndroidStudioを使用してWeChatホームページインターフェースを実装する
AndroidStudioを使用してWeChatホームページインターフェイスを実装する
ASがソースコードを含むWeChatホームページを実装するプロセスの詳細な分析と紹介
インターフェース分析
WeChatホームページを分析して、
必要な.xmlファイルの数を確認します。図に示すように、合計7つの.xmlファイルが必要です。これらのファイルの
うち、シリアル番号4で参照される残りの6つのインターフェースを組み合わせたインターフェースも必要です。
静的インターフェースの実装（.xml）
-
top.xml
-
bottom.xml
-
tab01.xml
-
activity_main.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="match_parent"
android:orientation="vertical">
<include layout="@layout/top"></include>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"></include>
</LinearLayout>
インターフェースの動的実装
ディレクトリ構造 
フラグメントは主にここで使用されます
フラグメントの利点は次のとおりです。
モジュール性：アクティビティにすべてのコードを記述する必要はありませんが、それぞれのフラグメントにコードを記述します。
再利用性：複数のアクティビティでフラグメントを再利用できます。
適応性：ハードウェアの画面サイズと画面の向きに応じて、さまざまなレイアウトを簡単に実現できるため、ユーザーエクスペリエンスが向上します。
著者：JYGodディアン
リンクします。https：//www.jianshu.com/p/11c8ced79193
次のステップは、インターフェースを初期化してイベントを開始することです
インターフェイスの影響を分析します。たとえば、ナビゲーションキーをクリックして、インターフェイスのメインページにジャンプすると、同時にナビゲーションキーを除いて、残りのナビゲーションキーが暗くなります。
＃キーコード
public class MainActivity extends Activity implements View.OnClickListener {
// weixinFragment mTab01;
// frdFragment mTab02;
// contactsFragment mTab03;
// settingsFragment mTab04;
private LinearLayout mTabWeiXin;
private LinearLayout mTabFrd;
private LinearLayout mTabContacts;
private LinearLayout mTabSettings;
private ImageButton mImgWeiXin;
private ImageButton mImgFrd;
private ImageButton mImgContacts;
private ImageButton mImgSettings;
private Fragment mTab01=new weixinFragment();
private Fragment mTab02=new frdFragment();
private Fragment mTab03=new contactsFragment();
private Fragment mTab04=new settingsFragment();
private FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initFragment();
initEvent();
setSelect(0); //初始值设置为0，默认weixinFragment为首页
}
/**
* 事件启动函数
* 全屏监听太耗内存
* 限制只监听4个LinearLayout
*/
private void initEvent(){
mTabWeiXin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabContacts.setOnClickListener(this);
mTabSettings.setOnClickListener(this);
}
private void initFragment(){
// mTab01=new weixinFragment();
// mTab02=new frdFragment();
// mTab03=new contactsFragment();
// mTab04=new settingsFragment();
fm=getFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_content,mTab01);
transaction.add(R.id.id_content,mTab02);
transaction.add(R.id.id_content,mTab03);
transaction.add(R.id.id_content,mTab04);
transaction.commit();
}
private void initView(){
mTabWeiXin=(LinearLayout)findViewById(R.id.id_tab_WeChat);
mTabFrd=(LinearLayout)findViewById(R.id.id_tab_Frd);
mTabContacts=(LinearLayout)findViewById(R.id.id_tab_Contacts);
mTabSettings=(LinearLayout)findViewById(R.id.id_tab_Settings);
mImgWeiXin=(ImageButton)findViewById(R.id.img_WeChat);
mImgFrd=(ImageButton)findViewById(R.id.img_Frd);
mImgContacts=(ImageButton)findViewById(R.id.img_Contacts);
mImgSettings=(ImageButton)findViewById(R.id.img_Settings);
}
private void setSelect(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideFragment(transaction);
//把图片设置为亮的
//设置内容区域
switch (i){
case 0:
Log.d("setSelect","1");
transaction.show(mTab01);
mImgWeiXin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mTab03);
mImgContacts.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:break;
}
transaction.commit();
}
/**
* 将4个fragment先全部隐藏
*/
private void hideFragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
public void onClick(View v){
Log.d("onClick","2");
resetImgs();
switch (v.getId()){
case R.id.id_tab_WeChat:
setSelect(0);
break;
case R.id.id_tab_Frd:
setSelect(1);
break;
case R.id.id_tab_Contacts:
setSelect(2);
break;
case R.id.id_tab_Settings:
setSelect(3);
break;
default:
break;
}
}
/**
* 切换图片至暗色
*/
public void resetImgs(){
mImgWeiXin.setImageResource(R.drawable.tab_weixin_normal);
mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImgContacts.setImageResource(R.drawable.tab_address_normal);
mImgSettings.setImageResource(R.drawable.tab_settings_normal);
}
}
ソースコードのダウンロード
CSDNダウンロードアドレス
https://download.csdn.net/download/bdwdwks/12251344code
クラウドダウンロードアドレス
https://gitee.com/moshangxveran/wechat_homepage.git
