專屬空間開發第一天-主介面設計
阿新 • • 發佈：2020-07-16
從昨天開始構思這個專案的，構思了一天，從自己到底要開發一款怎樣的軟體到確定目標用了幾個小時。
現在軟體技術已經非常的成熟，各種各樣的軟體也都有人做了。自己想了又想，結合當代人的特點，開發一款比較全能的軟體。也就是說裡面涵蓋的東西比較多。有這個想法以後就開時找素材，應該開發幾個頁面，怎樣佈局，加入哪些小程式在這個軟體裡面。由於說是自己的基礎還是非常薄弱的，只能說是在網路找到相應的教學視訊，跟著一步一步去做，然後再去回頭看每天所做過的內容，吸收相應的知識點，其實也就是說，在積累學習的經驗而已。
首先說一下自己目前所確定的內容有什麼：五子棋（娛樂時刻）、計賬本（清晰的一天）、語音詞典（不一樣的表達）、 網路視訊播放（你眼中的世界）、音樂播放器（聽世界的美好）、教務系統（互動）、歷史上的今天、天氣（今天的心情）、新聞（掌上資訊）括號裡面的是自己給取的名字。哈哈哈哈~~~
準備1-2天完成一項。
接下來進入今天的正題：主介面的設計
然後是設計跳轉到主介面
下面分頁的用的是radiogroup和radiobutton組合中間用的是fragment新增到此佈局頁面之中，下面還設定了點選的效果的變換
radiobutton中的button屬性設定為@null，不顯示按鈕的樣式，然後設計加入圖片drawableTop，圖片的效果單獨設定一下，同時設定監聽，點選下面的按鈕顯示的是對應的fragment，對應的下面的文字也是設定了效果的。還完成了我的頁面這幾項的跳轉。
以下為今天編寫的程式碼：
MainActivity和xml
package com.example.personspace; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import android.os.Bundle; import android.widget.RadioGroup;public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{ RadioGroup mainRg; //宣告三個按鈕對應的Fragment物件 Fragment starFrag,parnterFrag,meFrag; private FragmentManager manager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mainRg=findViewById(R.id.main_rg); //設定監聽點選了那個單選按鈕 mainRg.setOnCheckedChangeListener(this); //建立碎片物件 starFrag=new StarFragment(); parnterFrag=new ParnterFragment(); meFrag=new MeFragment(); //將三個Fragment進行動態載入，一起載入到佈局當中；replace add/hide/show addFragmentPage(); } /** * @des 將主頁當中的碎片一起載入到佈局當中，有用的顯示，無用的隱藏 */ private void addFragmentPage() { //建立碎片管理者物件 manager=getSupportFragmentManager(); //建立碎片處理事務物件 FragmentTransaction transaction=manager.beginTransaction(); //將三個Fragment統一新增到佈局當中 transaction.add(R.id.main_layout_center,starFrag); transaction.add(R.id.main_layout_center,parnterFrag); transaction.add(R.id.main_layout_center,meFrag); //隱藏後面兩個 transaction.hide(parnterFrag); transaction.hide(meFrag); //提交碎片改變後的事物 transaction.commit(); } @Override public void onCheckedChanged(RadioGroup group, int checkedId) { FragmentTransaction transaction=manager.beginTransaction(); switch (checkedId) { case R.id.main_rb_star: transaction.hide(parnterFrag); transaction.hide(meFrag); transaction.show(starFrag); break; case R.id.main_rb_parnter: transaction.hide(starFrag); transaction.hide(meFrag); transaction.show(parnterFrag); break; case R.id.main_rb_me: transaction.hide(starFrag); transaction.hide(parnterFrag); transaction.show(meFrag); break; } transaction.commit(); } }
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/main_tv_title" android:layout_width="match_parent" android:layout_height="50dp" android:text="@string/app_name" android:background="@color/lightyellow" android:gravity="center" android:textSize="20sp" android:textStyle="bold" android:textColor="@color/lightpink" ></TextView> <RadioGroup android:id="@+id/main_rg" android:layout_width="match_parent" android:layout_height="60dp" android:orientation="horizontal" android:background="@color/lightyellow" android:layout_alignParentBottom="true" android:padding="5dp"> <RadioButton android:id="@+id/main_rb_star" style="@style/main_rb" android:drawableTop="@drawable/main_rb_star" android:text="@string/lable_star" android:checked="true"/> <RadioButton android:id="@+id/main_rb_parnter" style="@style/main_rb" android:drawableTop="@drawable/main_rb_parnter" android:text="@string/lable_parnter" /> <RadioButton android:id="@+id/main_rb_me" style="@style/main_rb" android:drawableTop="@drawable/main_rb_me" android:text="@string/lable_me" /> </RadioGroup> <!--中間部分使用佔位，會用Fragment進行佈局--> <LinearLayout android:id="@+id/main_layout_center" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_below="@+id/main_tv_title" android:layout_above="@+id/main_rg"/> </RelativeLayout>
MeFragment對應的xml
package com.example.personspace; import android.content.Intent; import android.os.Bundle; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.example.personspace.Me.AboutActivity; import com.example.personspace.Me.FeedBackActivity; import com.example.personspace.Me.FuctionActivity; import com.example.personspace.Me.UpdateActivity; import de.hdodenhof.circleimageview.CircleImageView; /** * A simple {@link Fragment} subclass. */ public class MeFragment extends Fragment { private TextView About,Function,Update,FeedBack; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_me, container, false); About=view.findViewById(R.id.mefrag_tv_about); Function=view.findViewById(R.id.mefrag_tv_function); Update=view.findViewById(R.id.mefrag_tv_update); FeedBack=view.findViewById(R.id.mefrag_tv_feedback); About.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(getActivity(), AboutActivity.class); startActivity(intent); } }); Function.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(getActivity(), FuctionActivity.class); startActivity(intent); } }); Update.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(getActivity(), UpdateActivity.class); startActivity(intent); } }); FeedBack.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(getActivity(), FeedBackActivity.class); startActivity(intent); } }); return view; } }
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MeFragment" android:background="@mipmap/me" android:orientation="vertical"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/mefrag_iv" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" app:civ_border_width="2dp" app:civ_border_color="@color/grey" android:background="@mipmap/touxiang"/> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal" android:layout_marginTop="150dp"> <View android:layout_width="4dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:background="@color/colorAccent" android:layout_marginLeft="40dp" android:layout_marginRight="10dp"/> <TextView android:id="@+id/mefrag_tv_about" android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/about_app" android:textColor="@color/pink" android:textSize="20sp" android:gravity="center|left" android:onClick="About" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/white"/> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <View android:layout_width="4dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:background="@color/colorAccent" android:layout_marginLeft="40dp" android:layout_marginRight="10dp"/> <TextView android:id="@+id/mefrag_tv_function" android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/function" android:textSize="20sp" android:textColor="@color/pink" android:gravity="center|left"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/white"/> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <View android:layout_width="4dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:background="@color/colorAccent" android:layout_marginLeft="40dp" android:layout_marginRight="10dp"/> <TextView android:id="@+id/mefrag_tv_update" android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/update" android:textSize="20sp" android:textColor="@color/pink" android:gravity="center|left"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/white"/> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <View android:layout_width="4dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:background="@color/colorAccent" android:layout_marginLeft="40dp" android:layout_marginRight="10dp"/> <TextView android:id="@+id/mefrag_tv_feedback" android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/feedback" android:textSize="20sp" android:textColor="@color/pink" android:gravity="center|left"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/white"/> </LinearLayout>
列舉一個功能的跳轉ABOUT.XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".Me.AboutActivity" android:orientation="vertical" android:background="@mipmap/meback" > <TextView android:layout_width="match_parent" android:layout_height="100dp" android:text="@string/about_app" android:gravity="center" android:textSize="25dp" android:textStyle="bold"/> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" 該應用集成了多種小型軟體。 " /> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" 現在主要包括的有：五子棋（娛樂時刻）、 " /> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" 計賬本（清晰的一天）、語音詞典（不一 " /> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" 樣的表達）、網路視訊播放（你眼中的世界） " /> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" 音樂播放器（聽世界的美好）、教務系統 " /> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" （互動）、歷史上的今天、天氣（今天的 " /> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:text=" 心情）、新聞（掌上資訊） " /> </LinearLayout>
RadioButton和字型的變換xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@mipmap/ib_me_focus"/> <item android:state_checked="false" android:drawable="@mipmap/ib_me_normal"/> <item android:drawable="@mipmap/ib_me_normal"/> </selector> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@mipmap/ib_parnter_focus"/> <item android:state_checked="false" android:drawable="@mipmap/ib_parnter_normal"/> <item android:drawable="@mipmap/ib_parnter_normal"/> </selector> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@mipmap/ib_star_focus"/> <item android:state_checked="false" android:drawable="@mipmap/ib_star_normal"/> <item android:drawable="@mipmap/ib_star_normal"/> </selector> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/pink"/> <item android:state_checked="false" android:color="@color/grey"/> <item android:color="@color/grey"/> </selector>
還設定了上面的狀態列，還有v-19和v-21之上的情況，下面三個分別是
<!--全屏顯示無透明狀態列--> <style name="TranslucentTheme" parent="AppTheme"> <item name="android:windowFullscreen">true</item> </style> <!--全屏顯示，有透明的狀態列--> <style name="statusBar" parent="AppTheme"></style>
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 從19版本開始多屬性需要設定--> <!-- 全屏顯示，無狀態列的--> <style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item> <item name="android:windowFullscreen">true</item> </style> <!--全屏顯示，有透明的狀態列--> <style name="statusBar" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentNavigation">true</item> <item name="android:windowTranslucentStatus">true</item> </style> </resources>
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 從21版本開始多屬性需要設定--> <!-- 全屏顯示，無狀態列的--> <style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">false</item> <item name="android:windowTranslucentNavigation">true</item> <!-- 否則導航欄就會呈現系統預設的灰色--> <item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowFullscreen">true</item> </style> <!--全屏顯示，有透明的狀態列--> <style name="statusBar" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentNavigation">true</item> <item name="android:windowTranslucentStatus">false</item> <item name="android:statusBarColor">@android:color/transparent</item> </style> </resources>
今天學到的新知識還有對圖片的形狀進行變換，比如圓形
注意的是要匯入依靠：implementation 'de.hdodenhof:circleimageview:3.1.0'
而且圖片路徑寫法要用src
例如：android:src="@mipmap/touxiang"
今天的開發到此結束