精华内容
下载资源
问答
  • 前言:TabLayout是sdk 22之后的新特性,TabLayout+ViewPager实现切换卡布局在很多应用上是比较广泛的,同时实现起来也比较简单,交互效果也很不错,今天和大家一起分享其基本用法,在开始使用的时候,可能会遇到不少...

    前言:TabLayout是sdk 22之后的新特性,TabLayout+ViewPager实现切换卡布局在很多应用上是比较广泛的,同时实现起来也比较简单,交互效果也很不错,今天和大家一起分享其基本用法,在开始使用的时候,可能会遇到不少的坑(反正我是踩到坑了。。。。。。)。
    一 引入依赖库:在项目的build.gradle文件下添加库依赖
    在这里插入图片描述

      implementation 'com.android.support:support-v4:28.0.0'
        implementation 'com.android.support:appcompat-v7:28.0.0'
        implementation 'com.android.support:design:28.0.0'
    

    在这里需要注意的是,依赖库的版本需要与build文件中规定的一致(及与compileSdkVersion,targetSdkVersion保持一致,这里我使用的是compileSdkVersion 28,targetSdkVersion 28,所以版本号为28),否则会报错。

    二 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"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        tools:context=".TabActivity">
    <!--分别设置顶部导航栏的属性-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorFullWidth="false"
            app:tabMode="scrollable"
            app:tabMinWidth="60dp"
            app:tabPaddingStart="5dp"
            app:tabPaddingEnd="5dp"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:background="#ffffff" />
    
    </LinearLayout>
    

    在布局中可以分别设置tabLayout的属性:
    app:tabIndicatorHeight 设置导航item底部导航条

    app:tabIndicatorFullWidth false 设置item底部导航条不填满item宽度,而是与item的文字等宽, true 表示占满整个item,分别类似于wrap_content match_parent

    app:tabMode=“scrollable” 表示当导航栏的数量一次显示不全时,可支持滑动(今日头条顶部导航条是比较典型的例子)

    app:tabTextAppearance="@style/TabLayoutTextStyle"用于设置item字体的大小。tabLayout中只能通过这样的方式设置字体的尺寸,具体方法为:

    1)在style.xml文件中设置style:

        <style name="TabLayoutTextStyle">
            <item name="android:textSize">@dimen/tab_layout_text_size</item>
        </style>
    

    2)dimen.xml文件中设置字体的尺寸:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <dimen name="tab_layout_text_size">16dp</dimen>
    </resources>
    

    3)最后,在布局中通过app:tabTextAppearance属性引用style文件即可

    关于tabLayou的其他属性,大家在使用的时候可以对应的设置即可。

    三 Activity中使用:

    public class TabActivity extends AppCompatActivity {
        private List<String> mTitleList;
        //这里在使用的时候,如果在导包的过程中与widget包下的TabLayout冲突时,可以直接声明包的全名(我遇到了这个问题,导包的时候总是提示我导入widget下的包,无论各种clean build还是解决不了问题,最后索性直接声明包的全名)
        private android.support.design.widget.TabLayout mTabLayout;
        private ViewPager mViewPager;
        private TabAdapter mTabAdapter;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tab);
            initialize();
        }
        private void initialize() {
            mTabLayout = findViewById(R.id.tab_layout);
            mViewPager = findViewById(R.id.view_pager);
            mTitleList = new ArrayList<>();
            //设置导航的内容
            mTitleList.add("推荐");
            mTitleList.add("关注");
            mTitleList.add("小视屏");
            mTitleList.add("视屏");
            mTitleList.add("热点");
            mTitleList.add("北京");
            mTitleList.add("娱乐");
            mTitleList.add("NBA");
            mTitleList.add("其他");
            mTabAdapter = new TabAdapter(getSupportFragmentManager());
            mViewPager.setAdapter(mTabAdapter);
            mTabAdapter.setList(mTitleList);
            mTabLayout.setupWithViewPager(mViewPager);
    
        }
    }
    
    

    这里有一个需要注意的问题就是导包,不要和widget包下TabLayout混淆。实在不行,直接声明全名。

    四 FragmentPagerAdapter
    由于这里使用的布局是viewPager+fragment的切换布局,因此使用的适配器为FragmentPagerAdapter:

    public class TabAdapter extends FragmentPagerAdapter {
        private List<String> mTitleList;
        public TabAdapter(FragmentManager fm) {
            super(fm);
            this.mTitleList = new ArrayList<>();
        }
        public void setList(List<String> datas) {
            this.mTitleList.clear();
            this.mTitleList.addAll(datas);
            notifyDataSetChanged();
        }
        @Override
        public Fragment getItem(int i) {
            ContentFragment fragment = new ContentFragment();
            //通过这样的方式,向对应的fragmen中传递参数,在fragmeng同样通过Bundle接收参数,以区别不同的fragmeng加载不同的数据或者实现不同的逻辑
            Bundle bundle = new Bundle();
            bundle.putString("name", mTitleList.get(i));
            fragment.setArguments(bundle);
            return fragment;
        }
        @Override
        public int getCount() {
            return mTitleList.size();
        }
        @Override
        public CharSequence getPageTitle(int position) {
            String plateName = mTitleList.get(position);
            if (plateName == null) {
                plateName = "";
            } else if (plateName.length() > 15) {
                plateName = plateName.substring(0, 15) + "...";
            }
            return plateName;
        }
    }
    

    五 ContentFragment:
    1.每一个itemTab对应的fragmeng内容

    public class ContentFragment extends Fragment {
        private String mTitle;
        private View mRootView;
        private TextView mTextView;
        public ContentFragment() {
        }
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //在这里通过Bundle接收参数
            Bundle bundle = getArguments();
            mTitle = bundle.getString("name");
            if (mTitle == null) {
                mTitle = "参数非法";
            }
        }
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            mRootView = inflater.inflate(R.layout.fragment_content, container, false);
            initView(mRootView);
            return mRootView;
        }
    
        private void initView(View rootView) {
            mTextView = rootView.findViewById(R.id.tv);
            mTextView.setText(mTitle);
        }
    }
    
    

    2.fragment的xml布局:

    <RelativeLayout 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"
        tools:context=".ContentFragment">
        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"/>
    
    </RelativeLayout>
    

    至此,已完成了TabLayout作为顶部导航,viewPager+Fragmeng进行切换的基本布局。

    六 效果图
    在这里插入图片描述
    在这里插入图片描述
    六 总结
    1.TabLayout是sdk 22之后的新特性,因此必须要在sdk 22以后才能使用;

    2.在导包的时候,若与widget包下的TabLayout冲突时,可直接导入完整包名;

    3.在添加依赖库的时候,需要保持与compileSdkVersion,targetSdkVersion版本一致;

    4.tabItem字体的设置只能通过tabTextAppearance属性引用Style形式;

    5.TabLayout与ViewPager通过 mTabLayout.setupWithViewPager(mViewPager)方法进行关联,也是TabLayout与ViewPager联系起来的核心方法。

    由于本人水平有限,以上若存在问题,欢迎指出。

    展开全文
  • 切换卡由TabHost作为根元素,包含TabWidget和FrameLayout两个子元素,TabWidget表示切换卡中的点击标签,FrameLayout(帧布局)中包含切换卡中需要显示的内容,所有想要显示的不同内容都放在同一个帧布局中。...

    切换卡由TabHost作为根元素,包含TabWidget和FrameLayout两个子元素,TabWidget表示切换卡中的点击标签,FrameLayout(帧布局)中包含切换卡中需要显示的内容,所有想要显示的不同内容都放在同一个帧布局中。其中TabHost、TabWidget、FrameLayout必须为它们指定Android预设的id:tabhost,tabs,tabcontent(很奇怪的设定再见),帧布局中控件也需要自定义id。

    布局文件如下

    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.briup.tabwidget.MainActivity" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
    
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
    
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
    
                <TextView
                    android:id="@+id/tv1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="切换卡1" />
    
                <TextView
                    android:id="@+id/tv2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="切换卡2" />
    
                <TextView
                    android:id="@+id/tv3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="切换卡3" />
            </FrameLayout>
        </LinearLayout>
    
    </TabHost>

    切换卡的布局写完了,但并不能直接使用,里面有多少个切换卡,是怎样的切换卡需要使用Java代码加入和设定,而且Java类必须继承一个过时的TabActivity。代码如下

    import android.app.TabActivity;
    import android.os.Bundle;
    import android.widget.TabHost;
    import android.widget.TabHost.TabSpec;
    
    @SuppressWarnings("deprecation")
    public class MainActivity extends TabActivity {
    //划横线,过时了,使用者不能说没有,不多
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		TabHost tbHost = getTabHost();//不引用id直接获取切换卡外布局,解释了为何用Android自带的id
    		TabSpec tab1 = tbHost.newTabSpec("tab1")//tag,暂不管,内容可随意
    				.setIndicator("Tab1")//设定点击标签文字
    				.setContent(R.id.tv1);//设定切换卡内容
    		TabSpec tab2 = tbHost.newTabSpec("tab2").setIndicator("Tab2").setContent(R.id.tv2);
    		TabSpec tab3 = tbHost.newTabSpec("tab3").setIndicator("Tab3").setContent(R.id.tv3);
    		tbHost.addTab(tab1);//内容加入切换卡
    		tbHost.addTab(tab2);
    		tbHost.addTab(tab3);
    	}
    }
    效果如下


    展开全文
  • jQuery选项形式图片瀑布流布局选项卡切换效果,点击上面的选项,显示的内容以瀑布流的形式展示出来,这样的效果还是很酷炫的,可以用于个人网站上面,来显示个人相册,通过瀑布流展示出来。php中文网推荐下载!
  • 布局之选项卡切换

    2016-10-21 11:06:25
    --其定义的子布局是TabHost中每个页面显示的选项--> //第一个选项 android :id= "@+id/tab1" android :layout_width= "330dp" android :layout_height= "match_parent" android :...

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="330dp"
        android:layout_height="320dp"
        android:orientation="vertical"
        android:padding="5dp" >
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:gravity="center_horizontal"
            android:text="用户设置"
            android:textColor="#FF4500"
            android:textSize="@dimen/ScaleTextSize" /><!--标题-->
    
        <TabHost
            android:id="@android:id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
    
                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="35dp" >
                </TabWidget>           <!--选项卡切换按钮-->
    
                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" ><!--其定义的子布局是TabHost中每个页面显示的选项卡-->
    
                    <LinearLayout//第一个选项卡
    
                        android:id="@+id/tab1"
                        android:layout_width="330dp"
                        android:layout_height="match_parent"
                        android:orientation="vertical" >
    
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_margin="5dp"
                            android:orientation="horizontal" >
    
                            <TextView
                                android:id="@+id/TextView02"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:text="姓        名: "
                                android:textColor="#0000ff"
                                android:textSize="@dimen/ScaleTextSize"
                                android:textStyle="bold" />
    
                            <EditText
                                android:id="@+id/userName"
                                android:layout_width="match_parent"
                                android:layout_height="35dp"
                                android:layout_weight="1"
                                android:editable="false"
                                android:ems="10"
                                android:textSize="@dimen/ScaleTextSize" />
                        </LinearLayout>
    
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:orientation="horizontal" >
    
                            <TextView
                                android:id="@+id/TextView05"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:text="帐        号: "
                                android:textColor="#0000ff"
                                android:textSize="@dimen/ScaleTextSize"
                                android:textStyle="bold" />
    
                            <EditText
                                android:id="@+id/loginName"
                                android:layout_width="match_parent"
                                android:layout_height="35dp"
                                android:layout_weight="1"
                                android:editable="false"
                                android:ems="10"
                                android:textSize="@dimen/ScaleTextSize" />
                        </LinearLayout>
    
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:orientation="horizontal" >
    
                            <TextView
                                android:id="@+id/TextView01"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:text="原  密  码: "
                                android:textColor="#0000ff"
                                android:textSize="@dimen/ScaleTextSize"
                                android:textStyle="bold" />
    
                            <EditText
                                android:id="@+id/pswText"
                                android:layout_width="wrap_content"
                                android:layout_height="35dp"
                                android:layout_weight="1"
                                android:editable="true"
                                android:ems="10"
                                android:inputType="textPassword" />
                        </LinearLayout>
    
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:orientation="horizontal" >
    
                            <TextView
                                android:id="@+id/TextView03"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:text="新  密  码: "
                                android:textColor="#0000ff"
                                android:textSize="@dimen/ScaleTextSize"
                                android:textStyle="bold" />
    
                            <EditText
                                android:id="@+id/newpswText"
                                android:layout_width="wrap_content"
                                android:layout_height="35dp"
                                android:layout_weight="1"
                                android:editable="true"
                                android:ems="10"
                                android:inputType="textPassword" />
                        </LinearLayout>
    
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="5dp"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:orientation="horizontal" >
    
                            <TextView
                                android:id="@+id/TextView04"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:text="重复密码: "
                                android:textColor="#0000ff"
                                android:textSize="@dimen/ScaleTextSize"
                                android:textStyle="bold" />
    
                            <EditText
                                android:id="@+id/repswText"
                                android:layout_width="wrap_content"
                                android:layout_height="35dp"
                                android:layout_weight="1"
                                android:editable="true"
                                android:ems="10"
                                android:inputType="textPassword" />
                        </LinearLayout>
    
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" >
    
                            <Button
                                android:id="@+id/modificationBtn"
                                android:layout_width="match_parent"
                                android:layout_height="35dp"
                                android:layout_margin="5dp"
                                android:layout_weight="1"
                                android:text="修改"
                                android:textSize="@dimen/ScaleTextSize" />
    
                            <Button
                                android:id="@+id/closeBtn"
                                android:layout_width="match_parent"
                                android:layout_height="35dp"
                                android:layout_margin="5dp"
                                android:layout_weight="1"
                                android:text="关闭"
                                android:textSize="@dimen/ScaleTextSize" />
                        </LinearLayout>
                    </LinearLayout>
      
                    <LinearLayout      //第二个选项卡
                        android:id="@+id/tab2"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical" >
    
                        <LinearLayout
                            android:id="@+id/tablayout2"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical"
                            android:visibility="gone" >
    
                            <LinearLayout
                                android:layout_width="fill_parent"
                                android:layout_height="25dp"
                                android:background="#969696"
                                android:orientation="horizontal" >
    
                                <View     //实际是线条,宽度1dp
                                    android:layout_width="1dp"
                                    android:layout_height="fill_parent"
                                    android:background="#B8B8B8"
                                    android:visibility="visible" />
    
                                <TextView
                                    android:layout_width="35dp"
                                    android:layout_height="match_parent"
                                    android:gravity="center_vertical|center_horizontal"
                                    android:text="序号"
                                    android:textSize="@dimen/ScaleTextSize" />
    
                                <View
                                    android:layout_width="1dp"
                                    android:layout_height="fill_parent"
                                    android:background="#B8B8B8"
                                    android:visibility="visible" />
    
                                <TextView
                                    android:id="@+id/job"
                                    android:layout_width="110dp"
                                    android:layout_height="match_parent"
                                    android:gravity="center_vertical|center_horizontal"
                                    android:text="用户名"
                                    android:textSize="@dimen/ScaleTextSize" />
    
                                <View
                                    android:layout_width="1dp"
                                    android:layout_height="fill_parent"
                                    android:background="#B8B8B8"
                                    android:visibility="visible" />
    
                                <TextView
                                    android:id="@+id/addr"
                                    android:layout_width="110dp"
                                    android:layout_height="match_parent"
                                    android:gravity="center_vertical|center_horizontal"
                                    android:text="帐号"
                                    android:textSize="@dimen/ScaleTextSize" />
    
                                <View
                                    android:layout_width="1dp"
                                    android:layout_height="fill_parent"
                                    android:background="#B8B8B8"
                                    android:visibility="visible" />
    
                                <TextView
                                    android:id="@+id/student"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_weight="1"
                                    android:gravity="center_vertical|center_horizontal"
                                    android:text="操作"
                                    android:textSize="@dimen/ScaleTextSize" />
    
                                <View
                                    android:layout_width="1dp"
                                    android:layout_height="fill_parent"
                                    android:background="#B8B8B8"
                                    android:visibility="visible" />
                            </LinearLayout>
    
                            <ListView
                                android:id="@+id/lv"
                                android:layout_width="fill_parent"
                                android:layout_height="310dp" >
                            </ListView>
    
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal" >
    
                                <Button
                                    android:id="@+id/addUserBtn"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_margin="10dp"
                                    android:layout_weight="1"
                                    android:text="添加用户"
                                    android:textSize="@dimen/ScaleTextSize" />
    
                                <Button
                                    android:id="@+id/closeBtn2"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_margin="10dp"
                                    android:layout_weight="1"
                                    android:text="关闭"
                                    android:textSize="@dimen/ScaleTextSize" />
                            </LinearLayout>
                        </LinearLayout>
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>
        </TabHost>
    
    </LinearLayout>

    展开全文
  • !... ...请问怎么实现卡片的切换:(我在容器中设了两个jpanel面板,第一个是卡片布局,里面放了五个组件;第二个面板放了五个按钮) 就是我想知道点击按钮,怎么切换到别的卡片???????
  • jQuery tab选项卡切换和新闻资讯列表布局代码.zip
  • 同一选项多界面切换,实质是多个界面外面套一个card布局的容器,该容器就是一个中间面板,添加到选项面板中。 先写这个card布局的面板

    同一选项卡多界面切换,实质是在多个界面的外面套一个card布局的面板,该面板起到中间容器的作用,添加到选项卡面板中。

    主要适用于,在同一选项卡下,前一个界面传递数据信息到下一界面,直至最后界面提交完毕,返回第一界面。

    示例:
    在这里插入图片描述

    先写这个card布局的中间面板

    import java.awt.*;
    import javax.swing.*;
    
    @SuppressWarnings("serial")
    public class mediPane extends JPanel{
    	CardLayout card=new CardLayout();
    	public mediPane() {
    		// TODO Auto-generated constructor stub
    		setLayout(card);
    		updateUI();
    	}
    	public void addPane(JPanel jpane,String name) {
    		this.add(jpane, name);
    	}
    	public void removePane(JPanel jpane) {
    		this.remove(jpane);
    	}
    	public void nextPane() {
    		card.next(this);
    	}
    	public void firstPane() {
    		card.first(this);
    	}
    	public void lastPane() {
    		card.last(this);
    	}
    	public void prePane() {
    		card.previous(this);
    	}
    	public void showPane(String name) {
    		card.show(this, name);
    	}
    }
    

    选项卡面板/主面板:

    package switchPane;
    
    import javax.swing.*;
    
    @SuppressWarnings("serial")
    class homepage extends JFrame{
    	JTabbedPane jtp;
    	//在需要同一选项卡切换多个面板/界面的情况下,在外面套一个JPane,并运用card布局
    	static mediPane mediOne=new mediPane();//选项卡1
    	jp11 jpane11=new jp11();
    	jp12 jpane12=new jp12();
    	jp2 jpane2=new jp2();//选项卡2,因为不包含多界面,就不使用中间面板
    	static mediPane mediThree=new mediPane();//选项卡3
    	jp31 jpane31=new jp31();
    	jp32 jpane32=new jp32();//注释(1)
    	jp33 jpane33=new jp33();
    	homepage(){
    		setTitle("Text");
    		//整合多个界面到同一面板中
    		mediOne.addPane(jpane11, "11");
    		mediOne.addPane(jpane12, "12");
    		mediThree.addPane(jpane31, "31");
    		mediThree.addPane(jpane32, "32");
    		mediThree.add(jpane33, "33");
    		jtp=new JTabbedPane(JTabbedPane.LEFT);//选项卡位于左侧
    		//整合选项卡
    		jtp.add("one", mediOne);
    		jtp.add("two",jpane2);
    		jtp.add("three",mediThree);
    		add(jtp);
    		setBounds(700,400,300,150);
    		setVisible(true);
    		setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    		validate();
    	}
    }
    public class main {
    
    	public static void main(String[] args) {
    		// TODO Auto-generated method stub
    		new homepage();
    	}
    }
    

    注释(1):若界面2接收了界面1的数据,则不能这样声明对象,会报空指针的错误。因为打开JF的一开始就加载了所有的界面,而接收数据的界面没有接收到数据便会报错。所以一开始声要明成

    static JPane jpane32=new jpane();
    

    等要切换该页面前再修改成

    homepage.jpane32=new jp32(); 
    

    具体是删除界面再添加还是什么修改有很多方法,不再演示。

    贴其中一个界面,其他基本类似:

    import java.awt.*;
    import java.awt.event.*;
    import javax.swing.*;
    
    @SuppressWarnings("serial")
    public class jp33 extends JPanel implements ActionListener{
    	JButton pre,submit;
    	jp33(){
    		setLayout(new FlowLayout());
    		JLabel sign=new JLabel("3——3");
    		pre=new JButton("上一步");
    		pre.addActionListener(this);
    		submit=new JButton("提交");
    		submit.addActionListener(this);
    		add(sign);
    		add(pre);
    		add(submit);
    		setVisible(true);
    		updateUI();
    	}
    	@Override
    	public void actionPerformed(ActionEvent e) {
    		// TODO Auto-generated method stub
    		if(e.getSource()==pre) {
    			homepage.mediThree.prePane();
    		}
    		else if(e.getSource()==submit) {
    			homepage.mediThree.firstPane();
    		}
    	}
    }
    

    理解:
    在这里插入图片描述
    补充:切换选项卡前,该选项卡中的界面应跳转到初始界面,而并非停留在当前界面。请自行解决

    完毕

    [补充遇到的问题:
    💁‍♀️链接
    最初实现该功能时,参考上述链接的思想来实现:在上一界面里获得父容器,通过父容器移除该界面,添加下一界面,即主面板移除当前面板,添加一个同名面板,以达到同一选项卡多界面切换的效果,但出现的问题是,因移除再添加,选项卡将从最后排列,不会替补当前位置。]

    展开全文
  • import java.awt.*; import java.awt.event.*; import javax.swing.*; public class CardLayoutChange implements ActionListener { JPanel p1, p2, p3, p4; int i = 1;... public CardLayo...
  • 卡片布局

    2018-02-04 23:18:44
    卡片布局能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像一叠牌,组件叠在一起,初始时显示该空间中第一个添加的组件,通过CardLayout类提供的方法可以切换该空间中显示的组件。 1.CardLayout类...
  • 请问在swing布局中,如何使CardLayout 布局的lpanel切换卡片. 我的主界面是 public class Cmain extends JFrame { } 在Cmain 下半部分有一个jpanel1 采用的就是CardLayout 布局。 在Cmain 上半部分有一个...
  • Java开发GUI之CardLayout卡片布局CardLayout布局允许进行多套界面的设计,通过切换界面来实现布局样式的改变。CardLayout类似与一叠卡片,默认最先添加的在前面,界面始终只展示一个卡片。示例如下:static Panel ...
  • 写swiper的时候高度无法撑开,也不想用js动态设置高度,就可以利用flex弹性布局来撑开高度,效果如下。 wxml部分 <view class='ranking fz32'> <view class='ranking-date bgFFF'> <picker mode=...
  • 切换卡TabHost

    2016-09-18 21:27:46
    类似查看电话簿的界面,通过多...在界面布局文件中定义TabHost组件,并为该组件定义该选项的内容; 2.Activity应该继承TabActivity; 3.调用TabAcitvity的getTabHost()方法获得TabHost()对象; 4.通过TabHost对
  • 主要介绍了Android切换卡TabWidget用法,结合实例形式分析了TabWidget选项界面布局及功能实现的操作技巧,需要的朋友可以参考下
  • 文章转自: ... 界面 ...界面设计很简单,第一行三个头标,第二行动画图片,第三行页内容展示。 1 2 3 4 5 6 7 8 9 10 11
  • 介绍 ViewPager是我们最常用的控件之一了,几乎在项目中都会使用到它。我们在应用中会经常看到这样一种效果。... 布局没什么难度,这个比较基础。ViewPager里面存放4个CardView。我们关注一下它...
  • TabWidget切换卡

    千次阅读 2011-11-21 23:35:45
    Tab选项类似与电话本的界面,通过多个标签切换不同的内容,要实现这个效果,首先要知道TabHost,它是一个用来存放多个Tab标签的容器,每一个Tab都可以对应自己的布局,比如,电话本中的Tab布局就是一个线性布局 ...
  • 卡片布局能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像一叠牌,组件叠在一起,初始时显示该空间中第一个添加的组件,通过CardLayout类提供的方法可以切换该空间中显示的组件。1、 CardLayout类的...
  • Tab选项卡切换

    2018-12-24 13:42:55
    Tab选项卡切换类型 点击切换 滑动切换 实现选项切换,可以用JS来实现对页面CSS隐藏和显示形式的控制,从而达到切换的效果。下面介绍点击切换,滑动切换原理一样,只需把JS中onclick改成onmouseover 页面布局...
  • Java布局管理—卡片布局(CardLayout)

    千次阅读 2019-07-22 11:17:27
    卡片布局能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像一叠牌,组件叠在一起,初始时显示该空间中第一个添加的组件,通过CardLayout类提供的方法可以切换该空间中显示的组件。 构造方法: ...
  • android 切换卡的两种种形式

    千次阅读 2017-06-13 09:40:02
    切换卡是一种相对其他布局有点复杂的布局,如果你在切换卡中嵌入过多的其他布局话,估计大家都头昏脑胀了 ,特别是新手开始学习选项的时候更是如此。现在我为大家理一理切换卡布局: 怎么样布局不详细说,相信...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 655
精华内容 262
关键字:

切换布局卡