专属空间一-主界面设计
从昨天开始构思这个项目的，构思了一天，从自己到底要开发一款怎样的软件到确定目标用了几个小时。
现在软件技术已经非常的成熟，各种各样的软件也都有人做了。自己想了又想，结合当代人的特点，开发一款比较全能的软件。也就是说里面涵盖的东西比较多。有这个想法以后就开时找素材，应该开发几个页面，怎样布局，加入哪些小程序在这个软件里面。由于说是自己的基础还是非常薄弱的，只能说是在网络找到相应的教学视频，跟着一步一步去做，然后再去回头看每天所做过的内容，吸收相应的知识点，其实也就是说，在积累学习的经验而已。
首先说一下自己目前所确定的内容有什么：五子棋（娱乐时刻）、计账本（清晰的一天）、语音词典（不一样的表达）、网络视频播放（你眼中的世界）、音乐播放器（听世界的美好）、教务系统（交互）、历史上的今天、天气（今天的心情）、新闻（掌上资讯）括号里面的是自己给取的名字。哈哈哈哈~~~
准备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"
今天的开发到此结束
