zoukankan      html  css  js  c++  java
  • 专属空间一-主界面设计

      从昨天开始构思这个项目的,构思了一天,从自己到底要开发一款怎样的软件到确定目标用了几个小时。

    现在软件技术已经非常的成熟,各种各样的软件也都有人做了。自己想了又想,结合当代人的特点,开发一款比较全能的软件。也就是说里面涵盖的东西比较多。有这个想法以后就开时找素材,应该开发几个页面,怎样布局,加入哪些小程序在这个软件里面。由于说是自己的基础还是非常薄弱的,只能说是在网络找到相应的教学视频,跟着一步一步去做,然后再去回头看每天所做过的内容,吸收相应的知识点,其实也就是说,在积累学习的经验而已。

      首先说一下自己目前所确定的内容有什么:五子棋(娱乐时刻)、计账本(清晰的一天)、语音词典(不一样的表达)、网络视频播放(你眼中的世界)、音乐播放器(听世界的美好)、教务系统(交互)、历史上的今天、天气(今天的心情)、新闻(掌上资讯)括号里面的是自己给取的名字。哈哈哈哈~~~

      准备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"

    今天的开发到此结束

     

  • 相关阅读:
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车按键启动和蜂鸣器报警
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    asp中设置session过期时间方法总结
    asp中设置session过期时间方法总结
    ASP.NET关于Session_End触发与否的问题
  • 原文地址:https://www.cnblogs.com/moxihuishou/p/13324829.html
Copyright © 2011-2022 走看看